Angular table 行按钮单击时 2 次管道更改

Question

是否可以通过 change/put 管道在单击按钮时格式化 Angular 2 中的特定列？例如，我有一个包含 'Name' 和 'Hours' 列的 table，当我单击按钮时，'Hours' 显示的数据应转换为天数，反之亦然。

<button class="btn btn-secondary" (click)="convertToDays()">Days</button>
<button class="btn btn-secondary" (click)="convertToHours()">Hours</button>

<tbody>
<td>{{availableLeave.hours}}</td>
</tbody>

convertToDays(){
//put pipe to format availableLeave.hours to display as days ex.('48' hours should be displayed as '2' days)
}

convertToHours(){
//will just revert the original formatting of availableLeave.hours which is in hour format
}

Answer 1

根据您的要求，您可以直接在组件文件中使用 Pipe。您可以制作两个管道，一个用于小时，一个用于天，然后调用所需管道的转换函数。

有关如何在组件或服务中使用管道的更多详细信息，

Answer 2

你可以像这样给管道传递一个参数

{{someValue | myPipe:param}}

<button class="btn btn-secondary" (click)="param = 'd'">Days</button>
<button class="btn btn-secondary" (click)="param = 'h'">Hours</button>

class MyPipe implements PipeTransform {
  transform(value, param) {
    if(param === 'h') {
      return "...";
    } else {
      return "...";  
    }
  }
}

Angular table 行按钮单击时 2 次管道更改

Angular 2 pipe change on button click for table rows

javascript

angular2-pipe

angular