PrimeNG / p-table / p-dialog / onHide() 回调导致 ExpressionChangedAfterItHasBeenCheckedError

Question

Plunker 在这里可用：http://plnkr.co/edit/vczMKlnY5yxXtzrh955m?p=preview

用例看起来很简单：

• 1 个带有实体 p 表的组件
• 1 个带有用于更新实体的 p 对话框的组件

在弹出的保存点击中，我想更新实体。 在弹出关闭时，我想取消选择该行。

• 当我关闭弹出窗口（通过单击十字）时，一切正常。
• 保存更改后，我收到 ExpressionChangedAfterItHasBeenCheckedError 并且该行保持选中状态。
• 当我取消更改时，我还会收到 ExpressionChangedAfterItHasBeenCheckedError 并且该行保持选中状态。

通过在 updateSuccess 事件中将选择设置为 null，保存时的错误消失（plunker 中的 TRICK 1）。

我设法找到完全防止错误的唯一解决方案是禁用通过[closable]="false" 交叉关闭弹出窗口的可能性，并且永远不会处理弹出窗口中的显示布尔值，而是将此责任委托给父组件（使用父级中的关闭事件将显示设置为false）（plunker中的TRICK 1 + TRICK 2）。

如果不添加一些技巧来强制绑定手动刷新，我想不出一个好的解决方案。

这里最好的解决方案是什么？

app/app.component.ts ：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.template.html'
})
export class AppComponent {

  public display = false;

  public selectedEntity = null;

  public cols = [
    {field: 'id', header: 'ID'},
    {field: 'prop', header: 'Property'}
  ];

  public someEntities = [
    { id: 1, prop: 'foo' },
    { id: 2, prop: 'bar' }
  ];

  public onClick() {
    this.display = true;
  }

  public onRowSelect(event) {
    this.display = true;
  }

  public onClose() {
    this.selectedEntity = null;
    // XXX TRICK 2 : Uncomment to delegate the closing responsibility to this component
    //this.display = false;
  }

  public onUpdateSuccess() {
    // XXX TRICK 1 : Uncomment to prevent the error on save
    //this.selectedEntity = null;
    // XXX TRICK 2 : Uncomment to delegate the closing responsibility to this component
    //this.display = false;
  }
}

app/app.template.html：

<h2>PrimeNG Issue Template</h2>
<p>Please create a test case and attach the link of the plunkr to your github issue report.</p>

<p-table [columns]="cols" [value]="someEntities" (onRowSelect)="onRowSelect($event)" selectionMode="single" [(selection)]="selectedEntity">
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
          {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData">
      <td *ngFor="let col of columns">
          {{rowData[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

<my-popup [(display)]="display" [myEntity]="selectedEntity" (close)="onClose()" (updateSuccess)="onUpdateSuccess($event)"></my-popup>

app/popup.component.ts

import { Component, Input, Output, OnChanges, EventEmitter } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'my-popup',
  templateUrl: 'app/popup.component.html'
})
export class MyPopupComponent implements OnChanges {
  private _display = false;
  @Input()
  get display() {
    return this._display;
  }

  set display(_display: boolean) {
    this._display = _display;
    this.displayChange.emit(_display);
  }

  @Input()
  public myEntity: any;

  @Output()
  private displayChange = new EventEmitter<boolean>();

  @Output()
  public close = new EventEmitter<void>();

  @Output()
  public updateSuccess = new EventEmitter<any>();

  public myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
            myProp: ['', []]
        });
  }

  ngOnChanges() {
    if (this.display === true && this.myEntity) {
      this.myForm.reset({myProp: this.myEntity.prop});
    }
  }

  public onHide() {
    this.close.emit();
  }

  public onSubmit() {
    this.myEntity.prop = this.myForm.value.myProp;
    // Call to REST API to update the entity then emit the success
    this.updateSuccess.emit();
    // XXX TRICK 2 : Comment to delegate the closing responsibility to the parent component
    this.display = false;
  }
}

app/popup.component.html

<!-- TRICK 2 : add [closable]=false to delegate the responsibility to the parent component -->
<!-- <p-dialog [(visible)]="display" (onHide)="onHide()" [modal]="true" [closable]="true"> -->
<p-dialog [(visible)]="display" (onHide)="onHide()" [modal]="true">
  <p-header>My gorgeous popup</p-header>
  <form id="myForm" [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <input pInputText id="myProp" formControlName="myProp" />
  </form>
  <p-footer>
    <button pButton type="submit" label="Save" form="myForm"></button>
    <!-- TRICK 2 : replace "display = false" with "onHide()" to delegate the responsibility to the parent component -->
    <!-- <button pButton type="button" label="Cancel" (click)="onHide()"></button> -->
    <button pButton type="button" label="Cancel" (click)="display = false"></button>
  </p-footer>
</p-dialog>

Answer 1

要摆脱 ExpressionChangedAfterItHasBeenCheckedError，您必须在 app.component 中手动触发更改检测（请参阅 Expression ___ has changed after it was checked）

所以你的onClose 方法变成了：

public onClose() {
    this.selectedEntity = {};
    this.cdr.detectChanges();    
}

见Plunker