Question

我有一个父组件，我正在使用@ViewChild（）将一些HTML传递给子公共组件。

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

“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”。如果我删除此行，下一行将出现相同的错误。请帮忙。

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解决方法无效。但是，以下链接中描述的解决方案-即将控件设置为触摸状态（通过在控件上调用markAsTouched()）解决了该错误。

此问题在here中所述的Angular中。

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

3 个答案: