Question

是否可以在按钮单击时更改/放置管道以格式化Angular 2中的特定列？例如，我有一张名为＆＃39; Name＆＃39;和＆＃39;时间＆＃39;列，当我点击按钮时显示的数据为＆＃39;小时＆＃39;应该转换成天，反之亦然。

<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

您可以将参数传递给管道，如

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

Answer 2

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

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

对于表格行，按钮单击时更改角度2管道

2 个答案: