[解決済み] ExpressionChangedAfterItHasBeenCheckedError: チェックされた後に、式が変更されました。以前の値: 'undefined'
質問
同じ質問がすでにstack-overflowにたくさん投稿されていることは知っていますし、ランタイムエラーを回避するためにさまざまな解決策を試しましたが、どれも私にはうまくいきません。
コンポーネントとHTMLコード
export class TestComponent implements OnInit, AfterContentChecked {
@Input() DataContext: any;
@Input() Position: any;
sampleViewModel: ISampleViewModel = { DataContext: : null, Position: null };
constructor(private validationService: IValidationService, private modalService: NgbModal, private cdRef: ChangeDetectorRef) {
}
ngOnInit() {
}
ngAfterContentChecked() {
debugger;
this.sampleViewModel.DataContext = this.DataContext;
this.sampleViewModel.Position = this.Position;
}
<div class="container-fluid sample-wrapper text-center" [ngClass]="sampleViewModel.DataContext?.Style?.CustomCssClass +' samplewidget-'+ sampleViewModel.Position?.Columns + 'x' + sampleViewModel.Position?.Rows">
//some other html here
</div>
注意:このコンポーネントはDynamicComponentLoaderを使用して動的にロードされます。
トラブルシューティングの結果、いくつかの問題があることがわかりました。
まず、この子コンポーネントは DynamicComponentResolver を使用して動的に読み込まれ、以下のように入力値を渡します。
ngAfterViewInit() {
this.renderWidgetInsideWidgetContainer();
}
renderWidgetInsideWidgetContainer() {
let component = this.storeFactory.getWidgetComponent(this.dataSource.ComponentName);
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
let viewContainerRef = this.widgetHost.viewContainerRef;
viewContainerRef.clear();
let componentRef = viewContainerRef.createComponent(componentFactory);
debugger;
(<IDataBind>componentRef.instance).WidgetDataContext = this.dataSource.DataContext;
(<IDataBind>componentRef.instance).WidgetPosition = this.dataSource.Position;
}
子コンポーネントのhtmlを以下のように変更しても同じエラーが発生します。ただ、angular ngclass属性を追加してください。
<div class="container-fluid ds-iconwidget-wrapper text-center" [ngClass]="Sample">
</div>
データバインディングもすべてうまくいっているのですが、親コンポーネントで何かする必要がありますか? 私はすでに子コンポーネントですべてのライフサイクルイベントを試してみました。
どのように解決するのですか?
この
ngAfterContentChecked
のライフサイクルフックは、子コンポーネントやディレクティブのバインディングの更新がすでに終了しているときに起動されます。しかし、バインディングの入力として使用されるプロパティを更新しているのは
ngClass
ディレクティブのバインディング入力として使われるプロパティを 更新しています。これが問題なのです。Angularが検証ステージを実行すると、プロパティに保留中の更新があることが検出され、エラーがスローされます。
このエラーをよりよく理解するために、以下の2つの記事を読んでください。
のプロパティを変更する必要がある理由を考えてみましょう。
ngAfterViewInit
のライフサイクルフックを変更する必要があるのか考えてみましょう。の前にトリガーされる他のライフサイクルは、すべて
ngAfterViewInit/Checked
の前にトリガーされる他のライフサイクルは動作します。
ngOnInit
または
ngDoCheck
または
ngAfterContentChecked
.
というわけで、これを修正するために
renderWidgetInsideWidgetContainer
を
ngOnInit()
のライフサイクルフックに追加します。
関連
-
[解決済み] チェックした後に○○の表現が変わっている
-
[解決済み】コンポーネントのプロパティが現在の日付時間に依存している場合、Angular2の「expression has changed after it was checked」例外を管理する方法
-
[解決済み] formControlNameとFormControlの違いは何ですか?
-
[解決済み] Angular2でNgForがPipeでデータを更新しない。
-
[解決済み] Angular 4+ ngOnDestroy() サービス中 - observableを破壊する
-
[解決済み] AngularでEventEmitterに2つのパラメータを渡すには?
-
[解決済み] プロパティ 'X' はプライベートであり、クラス 'xyzComponent' 内でのみアクセス可能です。
-
[解決済み] 新しいangularプロジェクトを作成する際に依存関係ツリーエラーを解決できない
-
[解決済み] Error: モジュールによってインポートされた予期しない値 'undefined'。
-
[解決済み] angular-cli が HTTPS で ng serve するようにする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 2 下へスクロールする(チャット形式)
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] Angular 2: 反応するフォームコントロールの反復処理
-
[解決済み] Angular Materialでのデフォルトのソート - ヘッダーのソート
-
[解決済み] ng2 - ng-containerタグとng-templateタグの違い
-
[解決済み] trackBy` と `ngFor` の使い方
-
[解決済み] タイプスクリプト タイプ X はタイプ Y の length、pop、push、concat、その他 26 のプロパティが欠落しています。[2740]
-
[解決済み] AngularでFormGroupに動的にaddControlを追加する
-
[解決済み] angular-cli が HTTPS で ng serve するようにする。
-
[解決済み] Angular2 formGroupに値を設定する