角度变化检测 ExpressionChangedAfterItHasBeenCheckedError
Angular4 Change Detection ExpressionChangedAfterItHasBeenCheckedError
我正在尝试解决 AngularJS 中不存在的问题,因为 $digest
循环检查所有内容。
我正在尝试创建一个组件,它可以自行初始化(异步)并通知其周围的容器加载已完成。
我有这个伪table:
<my-table>
<ng-container *ngFor="let row in rows">
<my-table-row
[row]="row"
[isLoading]="row.isLoading"
(click)="onClickRow(row)"
></my-table-row>
<my-detail-row *ngIf="row.isExpanded">
<my-component
[data]="row"
></my-component>
></my-detail-row>
</ng-container>
</my-table>
在周围组件(包含 rows
)中,我有函数 onClickRow(row)
切换 row.isExpanded
。
在 my-component
组件中,我想将 row.isLoading
设置为 true(通知 "parent" 行它正在加载),然后在 [=44= 之后将其设置为 false ] 通话完毕。
@Input() data: any;
ngOnInit() {
this.task.isLoading = true; // PROBLEM
setTimeout(() => { // simulate API call
this.task.isLoading = false; // no problem
}, 2000);
}
现在我得到这个错误:Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
我猜这是因为变化是从 my-component
向上到 ng-container
但不是向下到 my-table-row
?
我有一个解决方法,我可以在 this.task.isLoading
的第一个设置周围使用第二个 setTimeout()
,但这会导致一些 popin 效果,我想找到一个更清洁的如果可能的话解决。
有没有人有建议,这是如何工作的?
我找到了一个我可以接受的解决方案。
您可以将 "parent" 注入您的组件(类似于 AngularJS 中的 require
)。
为此,您需要将 my-table-row
和 my-detail-row
组合成类似 my-item-row
的内容。这有额外的好处,您可以将切换逻辑放入组件中,而不必在每次使用时都重新实现它。
my-item-row.component.html
:
<div
class="item-row"
(click)="onToggleDetail()"
>
<div class="cell">...</div>
<div *ngIf="isLoading" class="loading"></div>
</div>
<div
*ngIf="isExpanded"
[hidden]="!isInitialized"
class="detail-row"
>
...
</div>
my-item-row.component.ts
:
import { Component } from '@angular/core';
import { Input, ChangeDetectorRef } from '@angular/core';
@Component({...})
export class MyItemRowComponent {
...
isInitialized: boolean = false;
isLoading: boolean = false;
isExpanded: boolean = false;
constructor(private changeDetector: ChangeDetectorRef) { }
onToggleDetail() : void {
this.isExpanded = !this.isExpanded;
}
public startLoading() : void {
this.isLoading = true;
this.isInitialized = false;
this.changeDetector.detectChanges(); // trigger re-evaluate
}
public stopLoading() : void {
this.isLoading = false;
this.isInitialized = true;
this.changeDetector.detectChanges(): // trigger re-evaluate
}
}
现在,您可以将其注入 my-component
,如下所示:
my-component.component.ts
:
import { Component } from '@angular/core';
import { Input, Host, Optional } from '@angular/core';
import { MyItemRowComponent } from '...';
@Component({...})
export class MyComponentComponent {
...
// Optional, because there may be a case where we want to use it outside of a row
constructor(@Optional() @Host() private parent: MyItemRowComponent) { }
ngOnInit() { // or ngAfterViewInit, doesn't matter
if (this.parent) {
this.parent.startLoading();
}
setTimeout(() => { // simulate API call
if (this.parent) {
this.parent.stopLoading();
}
}, 2000);
}
}
这是我目前的解决方案。
这会导致启动 my-component
的不同问题,即使它尚未展开,请参见此处:
我正在尝试解决 AngularJS 中不存在的问题,因为 $digest
循环检查所有内容。
我正在尝试创建一个组件,它可以自行初始化(异步)并通知其周围的容器加载已完成。
我有这个伪table:
<my-table>
<ng-container *ngFor="let row in rows">
<my-table-row
[row]="row"
[isLoading]="row.isLoading"
(click)="onClickRow(row)"
></my-table-row>
<my-detail-row *ngIf="row.isExpanded">
<my-component
[data]="row"
></my-component>
></my-detail-row>
</ng-container>
</my-table>
在周围组件(包含 rows
)中,我有函数 onClickRow(row)
切换 row.isExpanded
。
在 my-component
组件中,我想将 row.isLoading
设置为 true(通知 "parent" 行它正在加载),然后在 [=44= 之后将其设置为 false ] 通话完毕。
@Input() data: any;
ngOnInit() {
this.task.isLoading = true; // PROBLEM
setTimeout(() => { // simulate API call
this.task.isLoading = false; // no problem
}, 2000);
}
现在我得到这个错误:Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
我猜这是因为变化是从 my-component
向上到 ng-container
但不是向下到 my-table-row
?
我有一个解决方法,我可以在 this.task.isLoading
的第一个设置周围使用第二个 setTimeout()
,但这会导致一些 popin 效果,我想找到一个更清洁的如果可能的话解决。
有没有人有建议,这是如何工作的?
我找到了一个我可以接受的解决方案。
您可以将 "parent" 注入您的组件(类似于 AngularJS 中的 require
)。
为此,您需要将 my-table-row
和 my-detail-row
组合成类似 my-item-row
的内容。这有额外的好处,您可以将切换逻辑放入组件中,而不必在每次使用时都重新实现它。
my-item-row.component.html
:
<div
class="item-row"
(click)="onToggleDetail()"
>
<div class="cell">...</div>
<div *ngIf="isLoading" class="loading"></div>
</div>
<div
*ngIf="isExpanded"
[hidden]="!isInitialized"
class="detail-row"
>
...
</div>
my-item-row.component.ts
:
import { Component } from '@angular/core';
import { Input, ChangeDetectorRef } from '@angular/core';
@Component({...})
export class MyItemRowComponent {
...
isInitialized: boolean = false;
isLoading: boolean = false;
isExpanded: boolean = false;
constructor(private changeDetector: ChangeDetectorRef) { }
onToggleDetail() : void {
this.isExpanded = !this.isExpanded;
}
public startLoading() : void {
this.isLoading = true;
this.isInitialized = false;
this.changeDetector.detectChanges(); // trigger re-evaluate
}
public stopLoading() : void {
this.isLoading = false;
this.isInitialized = true;
this.changeDetector.detectChanges(): // trigger re-evaluate
}
}
现在,您可以将其注入 my-component
,如下所示:
my-component.component.ts
:
import { Component } from '@angular/core';
import { Input, Host, Optional } from '@angular/core';
import { MyItemRowComponent } from '...';
@Component({...})
export class MyComponentComponent {
...
// Optional, because there may be a case where we want to use it outside of a row
constructor(@Optional() @Host() private parent: MyItemRowComponent) { }
ngOnInit() { // or ngAfterViewInit, doesn't matter
if (this.parent) {
this.parent.startLoading();
}
setTimeout(() => { // simulate API call
if (this.parent) {
this.parent.stopLoading();
}
}, 2000);
}
}
这是我目前的解决方案。
这会导致启动 my-component
的不同问题,即使它尚未展开,请参见此处: