Angular 2管道更改按钮单击表格行答案

【问题标题】：Angular 2 pipe change on button click for table rowsAngular 2管道更改按钮单击表格行
【发布时间】：2017-06-30 23:40:17
【问题描述】：

是否可以在单击按钮时更改/放置管道以格式化 Angular 2 中的特定列？例如，我有一个包含“名称”和“小时”列的表，当我单击按钮时，“小时”显示的数据应转换为天数，反之亦然。

<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
}

【问题讨论】：

请发布演示您尝试完成的代码的代码。是的，有可能，但很难说这 200 种方法中哪一种适合您的需要。
嗨 Gunter，感谢您的检查，我添加了一些我想要实现的伪，但似乎有人发布了一个可以提供帮助的答案，我会检查哪种方式最适合。跨度>

标签： javascript angular angular2-pipe

【解决方案1】：

你可以像这样向管道传递参数

{{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 "...";  
    }
  }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：