在组件内打开模态弹出窗口时,表达式已更改错误

Question

我有一个父组件,我使用@ViewChild()将一些HTML传递给子公共组件.

当Child组件加载弹出窗口时.控制台抛出错误.

"ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后发生了变化.上一个值:'ngIf:undefined'.当前值:'ngIf:这是描述'.看起来该视图是在其父项及其子项被脏检查后创建的.它是否已在变更检测钩子中创建？"

我正在使用'@ 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".如果我删除此行,下一行将出现相同的错误.请帮忙.

Answer 1

您之前在父组件中检查过后,您尝试更新生命周期挂钩中的属性值.

建议的解决方案是在按钮单击/另一个用户触发事件上打开模式,或者如果需要在初始化视图后打开它,可以使用将跳过勾选的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

Answer 2

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'
  });
}

Answer 3

在我的情况下，错误发生在 Angular 4 应用程序中。当用户从响应形式的下拉列表中选择一个值时，应用程序需要打开 ng-bootrap 模式。使用setTimeout变通方法不起作用。但是，以下链接中描述的解决方案 - 即将控件设置为 touch（通过调用markAsTouched()控件）解决了错误。

这个问题是在角描述这里。