ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки. Предыдущее значение: исключение 'undefined'

Question

Я знаю, что об этом спрашивали много раз, но после прочтения подобных проблем я все еще не могу организовать свой код для исправления этого исключения,

в моем компоненте, у меня есть это свойство, которое динамически изменяется в зависимости от условие

public emailToValue: string

в моем html

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

<ng-container matColumnDef="emailTo">
<mat-header-cell *matHeaderCellDef mat-sort-header>Email To</mat-header-cell>
<mat-cell *matCellDef="let userMarket">
{{ userMarket | formatEmailTo : emailToValue}}
<input type="text"  matInput [value]="userMarket.emailTo">
</mat-cell>
</ng-container>

это мой канал, если адрес электронной почты является нулевым или неопределенным, я установил по умолчанию адрес электронной почты, который будет отображаться в новой строке

  @Pipe({
  name: 'formatEmailTo',
})
export class FormatEmailPipe implements PipeTransform {
  public transform(userMarket: UserMarketDTO, email: string): void {
    if (_.isNil(userMarket.emailTo)) {
    userMarket.emailTo = email;
    }
  }
}

функциональность работает, но я получаю это исключение каждый раз, когда я создаю новую строку

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'value: undefined'. Current value: 'value: suport@support.com'.

Буду признателен за любую помощь

спасибо

Answer 1

Здесь пара моментов:

1. Функциональность работает только в режиме разработки, где обнаружение изменений выполняется дважды. Когда вы получаете эту ошибку, это означает, что первое значение undefined было бы значением на входе в производство.
2. Я не уверен, что это лучшее использование трубы. Обычно я ожидаю, что канал на самом деле преобразуется и возвращает значение, необходимое HTML. Для меня это звучит так, как будто вы должны установить значение по умолчанию для вашей электронной почты, когда строка будет добавлена.

Но, если есть какое-то требование, заставляющее вас делать это таким образом, и вы хотите избежать использования ChangeDetectorRef, я думаю, у меня есть решение для вас. Пожалуйста, посмотрите мой stackblitz :

Используйте шаблон ref для столбца с уже переданным UserMarketDTO:

<ng-template #emailCell let-userMarket>
  {{ userMarket.email }}
  <input type="text" matInput [value]="userMarket.email">
<ng-template>

И столбца определение места, где происходит трубопровод:

<!-- Email Column -->
  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef> Email </th>
    <td mat-cell *matCellDef="let element">
      <ng-container *ngTemplateOutlet="emailCell; context: { $implicit: element | formatEmailTo: defaultEmailValue }"></ng-container>
    </td>
  </ng-container>

Но для этого также необходимо обновить канал, чтобы получить UserMarketDTO:

public transform(userMarket: UserMarketDTO, defaultEmail: string): UserMarketDTO {
    if (!userMarket.email) {
      userMarket.email = defaultEmail;
    }
    return userMarket;
  }