Question

我尝试按照建议实施所有推荐的方法

Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error

ExpressionChangedAfterItHasBeenCheckedError Explained

但是，无论是结合了Ionic还是我自己的开发人员技能，令我失望的是，如果不遇到ExpressionChangedAfterItHaHasBeenCheckedError错误，我将无法使它正常工作。

我有一个项目列表，希望能够独立选择或允许用户全选。

在.ts文件中，我有两种方法：

  toggleSelectedUser(user) {
    const index = this.selectedUsers.indexOf(user);
    if (index >= 0) {
      this.selectedUsers.splice(index, 1);
    } else {
      this.selectedUsers.push(user);
    }
  }

  toggleSelectAll() {
    if (!this.selectedUsers.length) {
      this.selectedUsers = [...this.template.userData];
    } else {
      this.selectedUsers = [];
    }
  }

在我的模板中，我正在使用

  <ion-toggle item-end color="secondary" checked="false" id="checkbox{{idx}}" [checked]="isSelected(user)" (ionChange)="toggleSelectedUser(user)"></ion-toggle>

被选中只是这样做：

  isSelected(user) {
    return this.selectedUsers.indexOf(user) >= 0;
  }

单个拨动开关工作正常，但是当我尝试执行toggleSelectAll()时，我得到了可怕的ExpressionChangedAfterItHasBeenCheckedError。

Answer 1

这首先是开发模式错误，不应出现在生产环境中。当在子组件中更改@Input数据时，通常会发生此错误，因为在UI中检测到任何更改时都会运行更改检测周期。

可以在detectChanges()生命周期挂钩内调用AfterContentChecked方法来修复此错误。或者，您也可以使用setTimeout()函数使您的代码异步。

您可以查看本文以获得详细的了解。

https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

离子ionChange提供ExpressionChangedAfterItHasBeenCheckedError

1 个答案: