[英]Angular4 Change Detection ExpressionChangedAfterItHasBeenCheckedError
I'm trying to solve a problem, that didn't exist in AngularJS, due to the $digest
-cycle checking everything. 我正在尝试解决一个问题,由于
$digest
-cycle检查了所有内容,因此该问题在AngularJS中不存在。
I'm trying to create a component, that can initialize itself (async) and notify its surrounding container that the loading has been completed. 我正在尝试创建一个可以初始化自身(异步)并通知其周围的容器加载已完成的组件。
I have this pseudo-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>
In the surrounding component (that holds the rows
), I have the function onClickRow(row)
which toggles row.isExpanded
. 在周围的组件(保存
rows
)中,我具有onClickRow(row)
函数,用于切换row.isExpanded
。
In the my-component
component I want to set row.isLoading
to true (notifying the "parent" row that it is loading) and then setting it to false after the API call is completed. 在
my-component
组件中,我想将row.isLoading
设置为true(通知“父”行它正在加载),然后在API调用完成后将其设置为false。
@Input() data: any;
ngOnInit() {
this.task.isLoading = true; // PROBLEM
setTimeout(() => { // simulate API call
this.task.isLoading = false; // no problem
}, 2000);
}
Now I get this error: Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
现在,我收到此错误:
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'true'.
I guess this is because the change goes from my-component
up the tree to ng-container
but then not down to my-table-row
? 我猜这是因为更改是从
my-component
到树到ng-container
,然后才是my-table-row
?
I have a workaround, in that I can use a second setTimeout()
, around the first setting of this.task.isLoading
, but this leads to some popin-effects and I would like to find a cleaner solution if possible. 我有一个解决方法,可以在
this.task.isLoading
的第一个设置周围使用第二个setTimeout()
,但这会带来一些弹出效果,如果可能的话,我想找到一个更干净的解决方案。
Does anyone have a suggestion, how this can work? 有没有人有建议,这怎么行?
I found a solution that I can live with. 我找到了可以接受的解决方案。
You can inject the "parent" into your component (similar to require
in AngularJS). 您可以将“父级”注入到组件中(类似于AngularJS中的
require
)。
For this to work, you need to combine my-table-row
and my-detail-row
into something like my-item-row
. 为此,您需要将
my-table-row
和my-detail-row
合并为my-item-row
。 This has the added benefit, that you can put the toggling-logic into the component and don't have to re-implement it on every use. 这具有额外的好处,您可以将切换逻辑放入组件中,而不必在每次使用时都重新实现它。
my-item-row.component.html
: 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
: 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
}
}
Now, you can inject this into my-component
, like this: 现在,您可以将其注入
my-component
,如下所示:
my-component.component.ts
: 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);
}
}
This is my current solution. 这是我目前的解决方案。
This lead to a different issue with the my-component
being initiated, even when it wasn't expanded yet, see here: 这导致启动
my-component
的另一个问题,即使尚未扩展,也请参见此处:
Angular4 ng-content gets built when ngIf is false ngIf为false时会构建Angular4 ng-content
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.