javascript - 控制台向我显示 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

您有两种方式绑定(bind) toDate 和 fromDate。这很好，但是您还有一个输入 (dateChange)，我认为它也会影响组件中的 toDate 和 fromDate 变量(不确定没有组件类代码)。你只能做一个或另一个。删除 (dateChange) 或使其成为单向绑定(bind)

<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>