Angular4更改檢測ExpressionChangedAfterItHasBeenCheckedError

Question

我正在嘗試解決一個問題，由於$digest -cycle檢查了所有內容，因此該問題在AngularJS中不存在。

我正在嘗試創建一個可以初始化自身（異步）並通知其周圍的容器加載已完成的組件。

我有這個偽表：

<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'. 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() ，但這會帶來一些彈出效果，如果可能的話，我想找到一個更干凈的解決方案。

有沒有人有建議，這怎么行？

Answer 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的另一個問題，即使尚未擴展，也請參見此處：

ngIf為false時會構建Angular4 ng-content