控制台向我顯示 Angular 7 中的 ExpressionChangedAfterItHasBeenCheckedError

Question

使用我的 angular 項目，我在小部件中添加了日期范圍過濾器（帶有起始日期和截止日期），當我的系統啟動時過濾器必須具有當前月份的第一天和當前日期，它是工作，但控制台向我顯示以下消息。

ExpressionChangedAfterItHasBeenCheckedError：表達式在檢查后已更改。 以前的值：'fromDate: undefined'。 當前值：'fromDate: Mon Jun 01 2020 21:17:17 GMT-0400 (hora estándar de Chile)'。

我的組件模板中的行如下：

 <div class="range-date"  *ngIf = "item?.id === this.widgetEnum.process">
                    <app-range-date [enableInitDate]="true" [(fromDate)]="item.fromDate" [(toDate)]="item.toDate" (dateChange)="changeDateProcess(item)"></app-range-date>
                  </div>

請問你能給我這樣的想法嗎？

Answer 1

您有兩種方式綁定 toDate 和 fromDate。 這很好，但您還有一個輸入 (dateChange)，我認為它也會影響組件中的 toDate 和 fromDate 變量（不確定沒有組件 class 代碼）。 你只能做一個或另一個。 刪除 (dateChange) 或使其成為單向綁定

<div class="range-date"  *ngIf = "item?.id === this.widgetEnum.process">
                <app-range-date [enableInitDate]="true" [(fromDate)]="item.fromDate" [(toDate)]="item.toDate"></app-range-date>
              </div>

或者

<div class="range-date"  *ngIf = "item?.id === this.widgetEnum.process">
                <app-range-date [enableInitDate]="true" [fromDate]="item.fromDate" [toDate]="item.toDate" (dateChange)="changeDateProcess(item)"></app-range-date>
              </div>