更新视图时出现 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 应用程序中的代码异味。您的孩子正在口授父母的状态，父母应该知道自己的状态。

Here's a contrived example. 我的父组件将一些值传递给子组件，子组件然后决定某个字符串值并发出它，然后父组件使用它来决定要显示哪个div。打开控制台查看可怕的ExpressionChangedAfterItHasBeenCheckedError 错误。

要解决此问题，我建议将您的状态及其计算方式（即状态、订单等）与您的组件（您的 Orders 和 OrdersList 组件）分开。我将实现一个服务，该服务具有一些用于操作状态的功能和一个发出组件可以订阅的 observable。