使用方法与类字段设置表格值的差异：为何点击表格不再刷新？

在模态对话框中使用PrimeNG的<p-table>时，点击表格会触发重复渲染，导致无法选择和复制文本。将直接绑定方法getMetadata()到[value]的写法，改为绑定类字段metadata后，问题解决。以下是具体代码和原因分析：

组件代码 #

@Input() details: any;
protected metadata: any;

ngOnInit(): void {
  this.metadata = this.getMetadata();
}

getMetadata() {
  return [{
    date: this.details.revisionInfo.timestamp
  }];
}

版本1（存在问题的写法） #

<p-table [value]="getMetadata()">
  <ng-template pTemplate="header">
    <tr>
      <th scope="col">Date</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td>
        {{rowData.date}}
      </td>
    </tr>
  </ng-template>
</p-table>

版本2（解决问题的写法） #

<p-table [value]="metadata">
  <ng-template pTemplate="header">
    <tr>
      <th scope="col">Date</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData>
    <tr>
      <td>
        {{rowData.date}}
      </td>
    </tr>
  </ng-template>
</p-table>

原因解释 #

核心逻辑：Angular变更检测与引用对比 #

• 版本1中，模板绑定[value]="getMetadata()"会在每次Angular执行变更检测时调用该方法。模态框内的鼠标点击（选中文本的操作）会触发组件的变更检测循环，而每次调用getMetadata()都会返回一个全新的数组对象（即使内容和之前一致，引用地址不同）。
• PrimeNG的<p-table>会通过对比value的引用是否变化来判断是否需要重新渲染。每次新数组都会被判定为数据更新，触发表格完整重渲染——这直接导致你选中的文本被新的DOM元素覆盖，无法完成复制操作。
• 版本2中，metadata是在ngOnInit中初始化的类字段，只要this.details不发生变化，它的数组引用就不会改变。变更检测时对比的是同一个引用，<p-table>不会触发不必要的重渲染，因此可以正常选中文本。

额外建议 #

• 禁止在模板中直接绑定方法调用到组件输入属性，这会引发频繁的方法执行和无效渲染，严重影响性能。
• 若数据需要动态更新，应在组件逻辑中修改现有字段的内容（而非返回新对象），或启用ChangeDetectionStrategy.OnPush来优化变更检测的触发频率。

内容的提问来源于stack exchange，提问作者witek