Angular4 变化检测 ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Angular4 Change Detection ExpressionChangedAfterItHasBeenCheckedErrorAngular4 变化检测 ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2017-12-08 21:29:26
【问题描述】：

我正在尝试解决一个在 AngularJS 中不存在的问题，因为 $digest-cycle 会检查所有内容。

我正在尝试创建一个组件，它可以自行初始化（异步）并通知其周围的容器加载已完成。

我有这个伪表：

<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（通知“父”行它正在加载），然后在API 调用完成后将其设置为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 效果，如果可能的话，我想找到一个更清洁的解决方案。

有没有人有建议，这如何工作？

【问题讨论】：

Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error 详细解释了这种行为
为什么不总是用 task.isLoading=true 初始化，而不是从我的组件中设置它，而是在加载组件时才更新到 false，这将按照你说的异步完成，你不会有这个问题
@Maximus 我不能将isLoading=true 设置为默认值，它控制my-table-row 的可见行为（显示加载指示器）。该链接很有帮助，但有点告诉我，除了 Promise/Timeout 之外我别无选择，因为我正在做一些我不应该做的事情。但现在我想不出任何其他方法来实现这一点，即在 my-component child 中拥有一个包含所有逻辑的“哑”表/包装组件。

标签： angular typescript angular2-changedetection

【解决方案1】：

我找到了一个我可以接受的解决方案。

您可以将“父级”注入到您的组件中（类似于 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 启动时出现不同的问题，即使它尚未扩展，请参见此处：

Angular4 ng-content gets built when ngIf is false

【讨论】：