Angular 2 pipe change on button click for table rows

Question

Est-il possible de changer/mettre un tuyau pour formater une colonne spécifique en Angular 2 lorsque l'on clique sur un bouton? Par exemple, j'ai un tableau avec les colonnes 'Nom' et 'Heures', lorsque je clique sur un bouton, les données affichées pour 'Heures' devraient être converties en jours et vice versa.

Jours
Heures

{{availableLeave.hours}}

convertToDays(){
//mettre un tuyau pour formater availableLeave.hours pour l'afficher en jours ex. ('48' heures devraient être affichées en '2' jours)
}

convertToHours(){
//va simplement inverser le format d'origine de availableLeave.hours qui est en format heure
}

Answer 1

Vous pouvez passer un paramètre au pipe comme

{{someValue | myPipe:param}}

Jours
Heures

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

Answer 2

Conformément à vos besoins, vous pouvez utiliser Pipe directement dans votre fichier de composant. Vous pouvez créer deux pipes, un pour les heures et un pour les jours, puis appeler la fonction de transformation du pipe requis.

pour plus de détails sur la manière d'utiliser les pipes dans un composant ou dans un service, consultez ce post.