PrimeNG p-table 方法在 table 单击时持续触发

Question

我有一个 p-table 有一组 12 个项目（不是延迟加载）。其中一些数据具有计算 HTML 中不同事物的方法。问题是每次 table 点击都会调用所有这些方法，无论我点击哪里。这些方法未绑定到点击事件 - 它们只是以字符串等形式返回一些数据。

有没有什么方法可以禁用该传播，这样我的方法就不会在每次 table 点击时都被调用？我只想渲染这个 table 一次并且不改变任何东西。我不需要使用onLazyLoad，因为数据足够小，我可以在OnInit中加载它。

p-table 有点像

  <p-table [value]="data"
       dataKey="id"
       [rowHover]="true"
       [filterDelay]="0"> 
          <div>{{ calculateCurrentTime() }}</div>
  </p-table>

并且 calculateCurrentTime() 会在我每次单击 table 时触发（无论何时）。我尝试设置 lazy="true" 没有帮助，但没有成功。

请务必注意，在此 table 中，我有一个按钮，我希望能够单击该按钮。

Answer 1

以下问题是由于从模板调用函数而发生的，我们不应该在模板中调用函数。

this method is getting called EVERY time I click on the table (no matter when)

另一种调用函数的方法是在 ngOnInit() 中并将其分配给变量。它将在启动 table 组件期间获取当前时间。示例：

ngOnInit() {
 this.getTabledata();
}

public getTabledata() {
 this.data = response.data;
 this.data.forEach(item => {
   // Update only below particualar object in the data.
   if (item.id = 13) {
    item.currentTime = this.calculateCurrentTime(item);
   }
 });

}

在模板中：

  <p-table [value]="data"
       dataKey="id"
       [rowHover]="true"
       [filterDelay]="0"> 
         // You can get this item by looping the data. I am just adding the condition
          <div>{{ item.currentTime ? item.currentTime : '' }}</div>
  </p-table>

Ref Link for Why You Should Never Use Methods Inside Templates in Angular:

https://betterprogramming.pub/why-you-should-never-use-methods-inside-templates-in-angular-497e0e11f948

谢谢

PrimeNG p-table 方法在 table 单击时持续触发

PrimeNG p-table methods keeps firing on table click

primeng

angular

primeng-datatable