web-dev-qa-db-ja.com

コンポーネント内でモーダルポップアップを開くときの式がエラーを変更しました

親コンポーネントがあり、@ ViewChild（）を使用してHTMLを子コンポーネントから子共通コンポーネントに渡します。

子コンポーネントがポップアップをロードしたとき。コンソールがエラーをスローします。

"ExpressionChangedAfterItHasBeenCheckedError：チェック後に式が変更されました。以前の値： 'ngIf：undefined'。現在の値： 'ngIf：this is description'。ビューが作成されたようです親とその子がダーティチェックされました。変更検出フックで作成されましたか？ "

'@ ng-bootstrap/ng-bootstrap';から{NgbModal}を使用しています

これがコードです。

更新-この親コンポーネントは、別の親HTMLファイルでapp-parent-componentとして呼び出されます。

親コンポーネント

@ViewChild('templateToLoad') templateToLoad;


constructor(private modalService: NgbModal, private ChangeDetector: ChangeDetectorRef) {
}

ngOnInit() {
    this.openPopup();
}

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

private openPopup() {
    const modalPrompt = this.modalService.open(CommonChildModalComponent, {windowClass: 'modal-Prompt fade-in-down'});
    modalPrompt.componentInstance.title = 'Title';
    modalPrompt.componentInstance.contentTemplate = this.templateToLoad;
    modalPrompt.componentInstance.originContext = this;
    modalPrompt.componentInstance.description = 'ABC';

親HTML

<ng-template #templateToLoad>
  <div class="someClass">This data will be shown on Popup without any error.
  </div>
</ng-template>

CommonChildPopupコンポーネント

@Input() title?: string;
@Input() description?: string;
@Input() originContext: any;
@Input() contentTemplate?: any;

constructor(public activeModal: NgbActiveModal) {
}

ngOnInit() {
    console.log('I am here in CommonModalComponent ngOnInit');
}

CommonChildPopup HTML

<div class="modal-header">
  <h4 class="modal-title">{{title}}</h4>
</div>

<div class="modal-body pb-3" [class.dimmer]="simulateLoading">
  <p *ngIf="description">{{description}}</p>
  <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>

上記のコンソールエラーは、この行ngIf = "description"に関するものです。この行を削除すると、次の行でも同じエラーが発生します。助けてください。

angularmodal-dialogbootstrap-modalviewchild
7
Aakash Kumar

親コンポーネントで以前にチェックされた後、ライフサイクルフックでプロパティ値を更新しようとしています。

推奨される解決策は、ボタンクリック/別のユーザートリガーイベントでモーダルを開くことです。または、ビューが初期化された後に開く必要がある場合は、ティックをスキップするsetTimeout（）を使用できます。

ngAfterViewInit() { setTimeout(() => this.openPopup()); }

作業用プランカー： https://plnkr.co/edit/FVV7QVp620lIGJwEhN6V?p=preview

このエラーに関する非常に適切で詳細な説明： https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

13
Lucian Moldovan

私の場合、エラーはAngular 4アプリケーションで発生していました。アプリケーションは、ユーザーが反応フォームのドロップダウンから値を選択したときにng-bootrapモーダルを開く必要がありました。setTimeout回避策は機能しませんでしたが、以下のリンクで説明されている解決策 コントロールでmarkAsTouched()を呼び出すことにより）コントロールをタッチに設定すると、エラーが解決しました。

この問題は、Angularで説明されているように---（ここ にあります。

5
Atif Majeed

ExpressionChangedAfterItHasBeenCheckedError：チェック後に式が変更されました。以前の値：'ng-untouched: true'。現在の価値： 'ng-untouched: false'。

setTimeoutトリックは、リアクティブフォームのサブスクライブにも機能しません。次の回避策は私のために働くはずです

html

<select [ngModel]="countryId"  #ngModelDir="ngModel"
      (ngModelChange)="fileChangeEvent($event, ngModelDir)">

ts

import { NgModel } from '@angular/forms';
...
fileChangeEvent(event: any, ngModelDir: NgModel) {
  ngModelDir.control.markAsTouched();
  const modalRef = this.modalService.open(MymodalComponent, {
    keyboard: false,
    backdrop: 'static'
  });
}
5
Arul