Угловая проблема Ошибка: ExpressionChangedAfterItHasBeenCheckedError. значение null

У меня есть эта ошибка консоли в моем проекте angular6: Ошибка: ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после его проверки. Предыдущее значение: 'flag:'. Текущее значение: 'flag: null'.

это код в дочернем компоненте ts

@Input() flag: any;

это код в дочернем компоненте html


 <div *ngIf="flag !== 'ABBONAMENTO_MDA'">
   <div class="form-group col-lg-3 col-md-3">
     // something else
   </div>
 </div>
 <div *ngIf="flag === 'ABBONAMENTO_MDA'">
  <div class="form-group col-lg-3 col-md-3">
    // something else
  </div>

это код в отце компонента

 <app-repertorio
       [flag]="eventoSelezionato" // here i intercept the state of flagMda
 </app-repertorio>

angular null error-console
person michelemalagnini    schedule 29.06.2020    source источник
comment
Ссылается на блог blog.angular-university.io/angular-debugging, чтобы узнать больше о angular debugging Выражение изменилось после проверки   -  person Neeraj Kumar    schedule 29.06.2020

Ответы (3)


arrow_upward
0
arrow_downward

Инициализация переменной flag некоторым начальным значением должна решить эту проблему. И это также позволяет иметь начальное состояние для вашего компонента, к которому можно вернуться на тот случай, если значение флага не определено через вход eventoSelezionato.

@Input() flag: string = 'INITIAL_VALUE';

person Dhruv Shah    schedule 29.06.2020
comment
Я установил значение флага ввода INITIAL_VALUE, но ошибка не исчезла - person michelemalagnini; 29.06.2020

arrow_upward
0
arrow_downward

просто используйте хук AfterViewChecked и службу ChangeDetectorRef angular. Детектор изменений поможет собрать все просмотры, которые необходимо проверить на наличие изменений.

constructor(private cdRef: ChangeDetectorRef) {}

ngAfterViewChecked() {
      this.cdRef.detectChanges();
  }
person Dhairya Bhavsar    schedule 29.06.2020

arrow_upward
0
arrow_downward

Предположим, у вас есть родительский компонент A и дочерний компонент B. Компонент A имеет имя и текстовые свойства. В своем шаблоне он использует выражение, которое ссылается на свойство name:

template: '<span>{{name}}</span>'

И он также имеет компонент B в своем шаблоне и передает свойство text этому компоненту через привязку свойства ввода:

@Component({
    selector: 'a-comp',
    template: `
        <span>{{name}}</span>
        <b-comp [text]="text"></b-comp>
    `
})
export class AComponent {
    name = 'I am A component';
    text = 'A message for the child component`;
    ...
}

Итак, вот что происходит, когда Angular запускает обнаружение изменений. Он начинается с проверки компонента A. Первой операцией в списке является обновление привязок, чтобы оно оценивало текстовое выражение как сообщение A для дочернего компонента и передавало его компоненту B. Он также сохраняет это значение в представлении:

view.oldValues[0] = 'A message for the child component';

Затем он вызывает хуки жизненного цикла, упомянутые в списке.

Теперь он выполняет третью операцию и вычисляет выражение {{name}} для текста "Я являюсь компонентом". Он обновляет DOM этим значением и помещает оцененное значение в oldValues:

view.oldValues ​​[1] = 'Я компонент'; Затем Angular выполняет следующую операцию и выполняет ту же проверку для дочернего компонента B. После проверки компонента B текущий цикл дайджеста завершается.

Если Angular работает в режиме разработки, он запускает второй дайджест, выполняя операции проверки, перечисленные выше. Теперь представьте, что каким-то образом текст свойства был обновлен в компоненте A до обновленного текста после того, как Angular передал значение A сообщение для дочернего компонента компоненту B и сохранил его. Теперь он запускает дайджест проверки, и первая операция - проверить, не изменился ли текст свойства:

AComponentView.instance.text === view.oldValues ​​[0]; // false 'Сообщение для дочернего компонента' === 'обновленный текст'; // false Тем не менее, он есть, поэтому Angular выдает ошибку ExpressionChangedAfterItHasBeenCheckedError.

То же самое и с третьей операцией. Если свойство name было обновлено после того, как оно было отображено в DOM и сохранено, мы получим ту же ошибку:

AComponentView.instance.name === view.oldValues ​​[1]; // false 'Я компонент' === 'обновленное имя'; // ложный

поэтому ошибка может быть устранена путем принудительного обнаружения изменений:

ngAfterViewInit() {
        this.cd.detectChanges();
    }

взято по ссылке: https://indepth.dev/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error/

person Munazzah Asad    schedule 29.06.2020