Угловое изменение 2-х труб на кнопку щелчка для строк таблицы

Question

Можно ли изменить/поместить трубу для форматирования определенного столбца в Угловом 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 
} 

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.