Ионный ионИзменить изменение выраженияChangedAfterItHasBeenCheckedError

Question

Я пытался реализовать все рекомендуемые методы, как было предложено

Все, что вам нужно знать об ошибке ExpressionChangedAfterItHasBeenCheckedError

ExpressionChangedAfterItHasBeenCheckedError Explained

Однако, либо в сочетании с Ionic, либо с моими собственными навыками разработчика, которые подводят меня, я не могу заставить это работать без ошибки ExpressionChangedAfterItHasBeenCheckedError.

У меня есть список элементов, которые я бы хотел выбрать самостоятельно или разрешить пользователю выбирать все.

В файле .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 в дочернем компоненте, поскольку цикл обнаружения изменений запускается при обнаружении любых изменений в пользовательском интерфейсе.

Эту ошибку можно исправить, вызвав метод detectChanges() внутриAfterContentChecked крючок жизненного цикла.Или вы можете также использовать функцию setTimeout(), чтобы сделать код асинхронным .

. Вы можете изучить эту статью для более детального понимания.

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