Изменение значения NgSwitch вызывает ExpressionChangedAfterItHasBeenCheckedError в методе получения - PullRequest
0 голосов
/ 05 марта 2020

Я пытаюсь проверить, допустимы ли входные данные для дочернего компонента. Дочерний компонент может быть одним из нескольких компонентов, отображаемых в зависимости от его типа. Проблема, с которой я сталкиваюсь, заключается в том, что при переключении компонентов Angular выдает страшную ошибку ExpressionChangedAfterItHasBeenCheckedError.

Parent-Component. html:

<mat-radio-group [(ngModel)]="type">
  <div fxLayout fxLayoutAlign="center center" fxLayoutGap="1rem">
    <mat-radio-button [value]="componentType.ONE" [checked]="true">One</mat-radio-button>
    <mat-radio-button [value]="componentType.TWO">Two</mat-radio-button>
    <mat-radio-button [value]="componentType.THREE">Three</mat-radio-button>
  </div>
</mat-radio-group>
<div [ngSwitch]="type">
  <child-component-one #child *ngSwitchCase="componentType.ONE"></child-component-one>
  <child-component-two #child *ngSwitchCase="componentType.TWO"></child-component-two>
  <child-component-three #child *ngSwitchCase="componentType.THREE"></child-component-three>
  <button [disabled]="!canSave" (click)="save()>Save></button>
</div>

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

Parent-Component.ts

@ViewChild('child', {static: false}) childComponent: BaseChildComponent; //all child components extend BaseChildComponent

get canSave(): boolean {
	return this.childComponent && this.childComponent.canSave;
}

Дочерний компонент содержит стандартную форму, ничего интересного ... и дочерний компонент реализует метод canSave, унаследованный от его родителя.

Child-Component .ts

get canSave(): boolean {
  //some other validation logic may be included here...
  return this.form.valid;
}

Итак ... проблема в том, что при изменении опции радио выдается исключение, когда [disabled]="!canSave" в родительском компоненте html проверяется.

Кажется, что при смене компонентов существует короткий период, когда childComponent не определен - и именно здесь начинаются проблемы ... кроме того, я не знаю, как go исправить это. ... Любое руководство здесь будет оценено!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...