为什么这个组件在这个简单的砰砰声中
@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 :)'
}
}
扔:
例外:表达式'I'm {{message}} in App@0:5'在被检查后发生了变化。之前的值:'I'm loading:('。当前值:'I'm all done loading:)' in [I'm {{message}} in App@0:5]
当我所做的一切都是更新一个简单的绑定时，我的视图被启动?
当前回答
它抛出一个错误，因为你的代码在ngAfterViewInit()被调用时被更新了。意思是当ngAfterViewInit发生时你的初始值被改变了，如果你在ngAfterContentInit()中调用它，那么它不会抛出一个错误。
ngAfterContentInit() {
this.updateMessage();
}
其他回答
出现此错误是因为现有值在初始化后立即更新。所以如果你将更新新值后，现有的值在DOM中呈现，那么它将工作得很好。就像本文中提到的，Angular调试"表达式被检查后发生了变化"
比如你可以用
ngOnInit() {
setTimeout(() => {
//code for your new value.
});
}
or
ngAfterViewInit() {
this.paginator.page
.pipe(
startWith(null),
delay(0),
tap(() => this.dataSource.loadLessons(...))
).subscribe();
}
正如你所看到的，我没有在setTimeout方法中提到时间。因为它是浏览器提供的API，而不是JavaScript API，所以这将在浏览器堆栈中单独运行，并将等待调用堆栈项完成。
Philip Roberts在Youtube的一个视频中解释了浏览器API如何调用这个概念(什么是事件循环?)
我通过从angular core中添加ChangeDetectionStrategy来解决这个问题。
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
selector: 'page1',
templateUrl: 'page1.html',
})
我有几乎相同的案例，我有一系列的产品。我不得不让用户删除产品根据他们的选择。最后，如果数组中没有产品，那么我需要显示取消按钮而不是返回按钮，无需重新加载页面。
我通过检查ngAfterViewChecked()生命周期钩子中的空数组来完成。 这就是我是如何做到的，希望它有帮助:)
import { ChangeDetectorRef } from '@angular/core';
products: Product[];
someCondition: boolean;
constructor(private cdr: ChangeDetectorRef) {}
ngAfterViewChecked() {
if(!this.someCondition) {
this.emptyArray();
}
}
emptyArray() {
this.someCondition = this.products.length === 0 ? true : false;
// run change detection explicitly
this.cdr.detectChanges();
}
removeProduct(productId: number) {
// your logic for removing product.
}
我从AfterViewInit切换到AfterContentChecked，它为我工作。
流程如下
在构造函数中添加依赖项: 构造函数(私有cdr: ChangeDetectorRef) {} 在实现方法代码中调用你的登录: ngAfterContentChecked () { this.cdr.detectChanges (); //调用或添加您的代码 ｝
我不能评论@Biranchi的帖子，因为我没有足够的声誉，但它为我解决了这个问题。
有一件事要注意! 如果添加changeDetection: ChangeDetectionStrategy。OnPush在组件上没有工作，它是一个子组件(哑组件)尝试添加到父组件也。
这修复了bug，但我想知道这有什么副作用。
