更新視圖時出現 ExpressionChangedAfterItHasBeenCheckedError

Question

我收到以下錯誤：

當我嘗試使用 *ngIf 更新視圖（在圖標顯示上切換）時。

這是我的.ts：

@Component({
    selector: 'app-orders',
    templateUrl: './orders.component.html',
    styleUrls: ['./orders.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class OrdersComponent implements OnInit, OnDestroy {

    loadedPendingOrders: Order[] = [];
    loadedProcessedOrders: Order[] = [];
    loadedDeliveredOrders: Order[] = [];
    loadedCancelledOrders: Order[] = [];
    pendingOrderTimelines: string[] = [];
    deliveredOrderTimelines: string[] = [];
    cancelledOrderTimelines: string[] = [];
    isDeliverySlotsActive: boolean;
    searchTerm: string;
    newOrderStatus: string;
    private subscription: Subscription;

    constructor(private ordersService: OrdersManagerService, private shopPreferencesService: ShopManagerService, private apiManager: ApiManagerService) {}

    ngOnInit(): void {
        this.subscription = timer(0, 5000).pipe(
            switchMap(() => this.apiManager.fetchShopOrders())
            ).subscribe(orders => {
                this.isDeliverySlotsActive = this.shopPreferencesService.isDeliverySlotsActive();
                const loadedOrders: OrdersList = orders;
                /* do stuff with orders */
        });
    }

    onNewOrderAdded(status: string){
        this.newOrderStatus = status;
    }
    ....
}

這是我的.html：

<div id="tab-group">
    <mat-tab-group dynamicHeight animationDuration="400ms">
        <mat-tab>
            <ng-template mat-tab-label>
                <span>Pending</span>
                <img src="../../assets/my-orders/blue-tiny.svg" *ngIf="newOrderStatus == 'PENDING'">
            </ng-template>
            <app-orders-list
                [orders]="loadedPendingOrders"
                [timelines]="pendingOrderTimelines"
                [isDeliverySlotsActive]="isDeliverySlotsActive"
                [searchTerm]="searchTerm"
                (newOrderStatus)="onNewOrderAdded($event)"
            ></app-orders-list>
            ...
        </mat-tab>
    </mat-tab-group>
</div>

視圖正在正確更新。 但是，錯誤仍然被拋出。 怎么來的？

提前致謝。

Answer 1

發生這種情況是因為您在組件生命周期完成之前更改newOrderStatus 。 該值以undefined開頭，然后將一些數據傳遞給子級，然后將下一個值發送回父級。

這通常是 Angular 應用程序中的代碼異味。 您的孩子正在口授父母的 state，父母應該知道其 state。

這是一個人為的例子。 我的父組件將一些值傳遞給子組件，然后子組件決定某個字符串值，發出它，然后父組件使用它來決定顯示哪個div 。 打開控制台查看可怕的ExpressionChangedAfterItHasBeenCheckedError錯誤。

要解決此問題，我建議將您的 state 及其計算方式（即狀態、訂單等）與您的組件（您的 Orders 和 OrdersList 組件）分開。 我將實現一個服務，該服務具有一些用於操作 state 的功能和一個發出組件可以訂閱的 observable。