ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

【Angular2】caused by: Expression has changed after it was checked.

スポンサードリンク

以前から何度か苦しめられているエラー

github.com

This is not a bug, it's a feature of dev mode working as intended. Calling enableProdMode( ) - see updated plunk when bootstrapping the app prevents the exception from being thrown.

That said, it's being thrown for good reason: In short, after every round of change detection, dev mode immediately performs a second round to verify that no bindings have changed since the end of the first, as this would indicate that changes are being caused by change detection itself.

In your plunk, you have the binding [attr.spinner]=isLoading, and isLoading changes as a result of your call to this.load(), which occurs when ngAfterViewInit is fired, which happens as a part of the initial change detection turn. That in itself isn't problematic though - the problem is that this.load() changes a binding but does not trigger a new round of change detection, which means that this binding will not be updated until some future round of change detection.

どういうこっちゃ・・・?

とりあえず、ngAfterViewInitで、値を変えていることがダメっぽい。よくわからずに使うとダメってことね。

angular.io

lifecycleの一番最後にある、ngOnDestroy。こいつで値を変更するとうまくいきましたー。

理由は知らん。