ngIf - チェックされた後に式が変更されました。

質問

簡単なシナリオがあるのですが、どうしてもうまくいきません!

私のビューでは、高さに制限のあるボックスにいくつかのテキストを表示します。

テキストはサーバーから取得されるので、テキストが入力されるとビューが更新されます。

ここで、'expand' ボタンに ngIf という が必要です。 は、ボックス内のテキストがオーバーフローしている場合、ボタンを表示します。

問題は、テキストが取得されるときに変更されるため、「展開」ボタンの条件が次のように変わってしまうことです。 true に変わってしまうことです。

なので、こんなエラーが出ます。 式はチェックされた後に変更されました。以前の値: 'false'。現在の値: 'true'です。

明らかにボタンが表示されない...

これを見る プランカー (エラーを見るにはコンソールをチェックしてください...)

これを動作させるために何かアイデアはありますか？

どのように解決するのですか？

このエラーが発生するのは dev mode :

で dev mode は、モデルが変更されたかどうかをチェックするために、通常の変更検出の実行の後に追加のターンを追加します。

というわけで、次のtickで強制的に変更検出を実行するために、以下のようなことができます。

export class App implements AfterViewChecked {

  show = false; // add one more property

  constructor(private cdRef : ChangeDetectorRef) { // add ChangeDetectorRef
    //...
  }
  //...
  ngAfterViewChecked() {
    let show = this.isShowExpand();
    if (show != this.show) { // check if it change, tell CD update view
      this.show = show;
      this.cdRef.detectChanges();
    }
  }

  isShowExpand()
  {
    //...
  }
}

ライブデモです。 https://plnkr.co/edit/UDMNhnGt3Slg8g5yeSNO?p=preview