PrimeNG p-table方法一直在表单击中触发。

Question

我有一个由12项组成的p表(不是延迟加载的)。其中一些数据具有在HTML中计算不同内容的方法。问题是，所有这些方法都会在每次单击表时被调用，而不是我单击的位置。这些方法没有绑定到click事件--它们只是以string等形式返回一些数据。

是否有任何方法可以禁用该传播，因此我的方法不会在每次单击表时被调用？我只想把这张桌子渲染一次，什么也不做。我不需要使用onLazyLoad，因为数据足够小，可以在OnInit中加载。

p-table看起来有点像那样。

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

每当我单击表时(无论何时)，calculateCurrentTime()都会触发。我试着将lazy=设置为“真”，但没有成功。

重要的是要注意，在这个表中，我有一个按钮，我想能够点击。

Answer 1

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

这个方法每次单击表(无论何时)都会被调用。

调用函数的另一种方法是在ngOnInit()中并在变量中赋值。它将在启动表组件时获得当前时间。示例：

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>

参考链接用于Why You Should Never Use Methods Inside Templates in Angular

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

谢谢