簡単なシナリオがありますが、うまく機能しません!
私の見解では、高さが制限されたボックスにテキストを表示しています。
テキストはサーバーからフェッチされているため、テキストが到着するとビューが更新されます。
今、私が持っている「拡大」ボタンを持ってngIf
いる必要がありますボックス内のテキストがあふれている場合は、ボタンを表示します。
問題は、テキストがフェッチされると変更されるため、true
Angularの変更検出が完了した後に「展開」ボタンの状態が変わるということです...
だから私はこのエラーを受け取ります:チェックされた後に式が変更されました。以前の値: 'false'。現在の値: 'true'。
明らかにボタンは表示されません...
このPlunkerを参照してください(コンソールでエラーを確認してください...)
これを機能させる方法はありますか?
このエラーは次の理由で発生しますdev mode
:
でdev mode
変化検出モデルが変更されたかどうかを確認するために、すべての定期的な変更検出の実行後に追加のターンを追加します。
したがって、次のティックを強制的に実行して変更検出を実行するには、次のようにします。
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
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加