角度2管道更改按钮单击表格行

是否可以更改/放置管道来格式化按钮单击Angular 2中的特定列？例如，我有一个带有'姓名'和'小时'列的表格，当我点击一个按钮时，显示'小时'的数据应该转换为天，反之亦然。角度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 
}

来源

2017-02-13 xird

请张贴演示了代码你试图完成。是的，这是可能的，但很难判断哪200种方式适合您的需求。 –

嗨Gunter，感谢您检查，我添加了一些我想实现的伪造，但似乎有人发布了可以帮助的答案，我会检查哪种方式最适合。 – xird

您可以将参数传递到管道像

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

来源

2017-02-13 10:14:58

根据您的要求，您可以直接在组件文件中使用管道。您可以为“小时”和“天”中的一个设置两个管道，然后调用所需管道的变换功能。

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

来源

2017-02-13 07:01:59 HirenParekh

角度2管道更改按钮单击表格行

回答

相关问题