[英]Why am I getting ExpressionChangedAfterItHasBeenCheckedError Error when it is called before View is Checked - Angular
[英]Getting ExpressionChangedAfterItHasBeenCheckedError when updating view
我收到以下错误:
当我尝试使用 *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>
视图正在正确更新。 但是,错误仍然被抛出。 怎么来的?
提前致谢。
发生这种情况是因为您在组件生命周期完成之前更改newOrderStatus
。 该值以undefined
开头,然后将一些数据传递给子级,然后将下一个值发送回父级。
这通常是 Angular 应用程序中的代码异味。 您的孩子正在口授父母的 state,父母应该知道其 state。
这是一个人为的例子。 我的父组件将一些值传递给子组件,然后子组件决定某个字符串值,发出它,然后父组件使用它来决定显示哪个div
。 打开控制台查看可怕的ExpressionChangedAfterItHasBeenCheckedError
错误。
要解决此问题,我建议将您的 state 及其计算方式(即状态、订单等)与您的组件(您的 Orders 和 OrdersList 组件)分开。 我将实现一个服务,该服务具有一些用于操作 state 的功能和一个发出组件可以订阅的 observable。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.