为什么在这个简单的plunk中的组件会出现这种情况
@Component({
selector: 'my-app',
template: `<div>I'm {{message}} </div>`,
})
export class App {
message:string = 'loading :(';
ngAfterViewInit() {
this.updateMessage();
}
updateMessage(){
this.message = 'all done loading :)'
}
}
抛出异常：
异常：表达式“我在 App@0:5 中是{{message}}”在被检查后已更改。先前的值为：“我正在加载:( ”。当前值为：“我完成了所有加载:) ”，位于 [我在 App@0:5 中是{{message}}]
当我只是在视图初始化时更新一个简单绑定时发生了什么？
正如drewmoore所说，这种情况下的正确解决方案是手动触发当前组件的变更检测。这可以使用ChangeDetectorRef对象（从angular2/core导入）的detectChanges()方法或其markForCheck()方法完成，后者还会更新任何父组件。相关示例：
import { Component, ChangeDetectorRef, AfterViewInit } from 'angular2/core'
@Component({
selector: 'my-app',
template: `<div>I'm {{message}} </div>`,
})
export class App implements AfterViewInit {
message: string = 'loading :(';
constructor(private cdr: ChangeDetectorRef) {}
ngAfterViewInit() {
this.message = 'all done loading :)'
this.cdr.detectChanges();
}
}
如果需要的话，这里也有一些 Plunker 展示 ngOnInit, setTimeout, 和 enableProdMode 的方法。
首先，请注意，只有在以开发模式运行应用程序时（从beta-0开始默认情况下），才会抛出此异常：如果您在引导应用程序时调用 enableProdMode()，则不会抛出异常（请参见更新的Plunk）。
其次，请不要那样做，因为此异常被抛出是有充分理由的：简而言之，在开发模式下，每一轮变更检测后都会立即跟随第二轮，以验证自第一轮结束以来是否有任何绑定发生了变化，因为这将表明变化是由变更检测本身引起的。
在您的Plunk中，绑定{{message}}通过调用setMessage()而发生变化，该函数在ngAfterViewInit钩子中触发，作为初始变更检测的一部分。虽然这本身并不会造成问题，但问题在于setMessage()改变了绑定，但没有触发新的变更检测轮次，这意味着直到将来触发某个其他的变更检测轮次时才会检测到这种变化。
要点是：任何改变绑定的事情都需要在其发生时触发一轮变更检测。
更新以回应所有请求一个如何做到这一点的示例：@Tycho的解决方案有效，答案中@MarkRajcok指出的三种方法也是有效的。但坦率地说，它们都感觉很丑陋、不正确，就像我们习惯于在ng1中依赖的那种hack。
当然，有一些偶尔的情况下这些hack是适用的，但如果您经常使用它们，这表明您正在与框架作斗争，而不是完全拥抱其反应性质。
在我看来，更符合惯例的“Angular2方式”是类似于以下内容：
(plunk)@Component({
selector: 'my-app',
template: `<div>I'm {{message | async}} </div>`
})
export class App {
message:Subject<string> = new BehaviorSubject('loading :(');
ngAfterViewInit() {
this.message.next('all done loading :)')
}
}
updateMessage而不是setMessage。 - superjosngAfterViewChecked() 对我起了作用：
import { Component, ChangeDetectorRef } from '@angular/core'; //import ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) { }
ngAfterViewChecked(){
//your code to update the model
this.cdr.detectChanges();
}
我通过从Angular核心添加ChangeDetectionStrategy来解决了这个问题。
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'page1',
templateUrl: 'page1.html',
})
this.cdr.detectChanges();。因为这可能是因为变更检测没有触发。 - Harshal CarpenterchangeDetection：ChangeDetectionStrategy.OnPush，这会阻止HTML和TS之间的生命周期。 - Mohammad Mehdi Mohammadi如果你只是改变成员变量 message，为什么不能使用 ngOnInit？
如果你想要访问子组件的引用 @ViewChild(ChildComponent)，确实需要使用 ngAfterViewInit 等待它。
一种不太好的解决方法是使用 setTimeout 在下一个事件循环中调用 updateMessage()。
ngAfterViewInit() {
setTimeout(() => {
this.updateMessage();
}, 1);
}
对于这个问题，我已经尝试了以上许多答案，在最新版本的Angular (6或更高版本)中并不起作用。
我正在使用需要在第一次绑定完成后进行更改的Material控件。
export class AbcClass implements OnInit, AfterContentChecked{
constructor(private ref: ChangeDetectorRef) {}
ngOnInit(){
// your tasks
}
ngAfterContentChecked() {
this.ref.detectChanges();
}
}
我添加了我的答案，希望这可以帮助一些人解决特定的问题。
我从AfterViewInit切换到AfterContentChecked，这对我有用。
以下是步骤:
在你的构造函数中添加依赖项:
constructor (private cdr: ChangeDetectorRef) {}
并在实现的方法中调用你的登录代码：
ngAfterContentChecked() {
this.cdr.detectChanges();
// call or add here your code
}
ngAfterContentChecked 在性能方面似乎不是明智的选择。在我的小样本中，即使在 Angular 完成视图初始化后滚动，代码也会被执行多次。对于性能有什么想法吗？ - Smamatti这篇文章详细解释了ExpressionChangedAfterItHasBeenCheckedError错误的行为.
你设置中的问题在于，ngAfterViewInit生命周期钩子会在变更检测处理DOM更新之后执行。而你正在有效地更改模板中此钩子中使用的属性，这意味着需要重新渲染DOM：
ngAfterViewInit() {
this.message = 'all done loading :)'; // needs to be rendered the DOM
}
而这将需要进行另一个变更检测周期，而Angular的设计只运行一次脏检查循环。
你基本上有两种选择来修复它：
使用setTimeout、Promise.then或在模板中引用的异步observable异步更新属性
在DOM更新之前执行属性更新 - ngOnInit、ngDoCheck、ngAfterContentInit、ngAfterContentChecked
enableProdMode(); 时出现了这个问题。在生产环境中没有发生，但创建一个微任务是有意义的。 - Davut Gürbüz出现此错误是因为在初始化后立即更新了现有值。因此，如果您在现有值呈现在DOM后更新新值，则会正常工作。就像在这篇文章中提到的Angular调试 "Expression has changed after it was checked"
例如，您可以使用
ngOnInit() {
setTimeout(() => {
//code for your new value.
});
}
或者
ngAfterViewInit() {
this.paginator.page
.pipe(
startWith(null),
delay(0),
tap(() => this.dataSource.loadLessons(...))
).subscribe();
}
你可以看到我在setTimeout方法中没有提到时间。由于它是浏览器提供的API而不是JavaScript API，因此它将在浏览器堆栈中单独运行，并等待调用堆栈项完成。
如何调用浏览器API的概念是由Philip Roberts在YouTube视频（What the hack is event loop?）中解释的。
您只需要在正确的生命周期钩子中更新您的消息，本例中为ngAfterContentChecked而不是ngAfterViewInit，因为在ngAfterViewInit中已经开始了对变量message的检查但尚未结束。
参见：https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview
所以代码就是这样：
import { Component } from 'angular2/core'
@Component({
selector: 'my-app',
template: `<div>I'm {{message}} </div>`,
})
export class App {
message: string = 'loading :(';
ngAfterContentChecked() {
this.message = 'all done loading :)'
}
}
在Plunker上查看演示。
ngAfterContentChecked 和 ChangeDetectorRef 的组合对我来说很管用。在 ngAfterContentChecked 中调用 - this.cdr.detectChanges(); - Kunal Dethe
ExpressionChangedAfterItHasBeenCheckedError错误，你需要了解的一切 详细地解释了其行为。 - Max KoretskyidetectChanges()时修改您的ChangeDetectionStrategy。https://dev59.com/JlkS5IYBdhLWcg3we22Z#54954374 - luiscla27