如何在不更改 @Input 引用的情况下使用 OnPush 策略更新 Angular UI？

Question

我有一个具体的组件，它用一个 @Input() data 扩展了一个抽象 class。 @Input data 被 PrimeNG table 用来显示行。 PrimeNG table 使用 Angular OnPush 策略。

当我将对象推送到@Input data 数组时，更改未反映在 UI。

如果我在将对象推送到数组后更改 data 的引用（通过类似 this.data = deepCopy(this.data) as Field[]），则更改显示在 UI.

在这种情况下，我不希望更改 data 的引用，因为其他组件可能会操纵该数据，而且我不希望同步同一数据的多个不同副本。

如何在不更改引用的情况下强制 Angular 更新 UI？ ChangeDetectorRef.detectChanges() 不会相应地更新 UI。

摘要 table class 与 PrimeNG table:

@Directive()
export abstract class TableComponent<T> implements OnChanges {

  @Input() data: T[];

  @ViewChild('dt') dataTable: Table; // PrimeNG table which displays rows of data

  ...
}

使用 addRow() 函数的具体 class：

@Component({
  selector: 'app-table',
  templateUrl: '...',
  styleUrls: ['...']
})
export class SomeComponent extends TableComponent<Field> implements OnInit, OnChanges {

  ...

  public addRow(): void {
    const field = {} as Field;
    field.id = 1;
    
    this.data.push(field);

    // this.changeDetectorRef.detectChanges(); // Does not update the UI
    // this.data = deepCopy(this.data) as Field[]; // Updates the UI by changing reference
  }
}

Answer 1

我想出了一个解决方案，可以使 UI 正确更新。

将 PrimeNG table value 属性绑定到一个函数，returns 所有预期数据解决了 UI 未更新的问题。

public addRow(): void {
    const field = {} as Field;
    field.id = 1;
    
    this.data.push(field);
}

public getData(): Field[] {
    return this.data.filter(field => field.id > 0);
}

组件模板片段：

<p-table #dt [columns]="cols"
             [value]="getData()"
             [paginator]="true"
             [paginatorPosition]="'both'"
             [rows]="10">
...

如何在不更改 @Input 引用的情况下使用 OnPush 策略更新 Angular UI？

How do I update Angular UI with OnPush strategy without changing the @Input reference?

angular2-changedetection

primeng

angular