如何在 angular 中连续使用两个管道

Question

我有一个将数字转换为字符串的管道。

Import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'nomeMesPipe',
})

export class NomeMesPipe implements PipeTransform {
  transform(value: any): string {
    if (value) {
      switch (
        value // Converte o numero em nome do mês
      ) {
        case 0:
          value = 'Janeiro';
          break;
        case 1:
          value = 'Fevereiro';
          break;
        case 2:
          value = 'Março';
          break;
        case 3:
          value = 'Abril';
          break;
        case 4:
          value = 'Maio';
          break;
        case 5:
          value = 'Junho';
          break;
        case 6:
          value = 'Julho';
          break;
        case 7:
          value = 'Agosto';
          break;
        case 8:
          value = 'Setembro';
          break;
        case 9:
          value = 'Outubro';
          break;
        case 10:
          value = 'Novembro';
          break;
        case 11:
          value = 'Dezembro';
          break;
      }
      return value;
    }
    return '';
  }
}

然后我有一个日期，它使用日期管道分为日、月和年。就像这样：

{{data.dataDeAceite | date:'dd'}} // 15
{{data.dataDeAceite | date: 'M'  }} //6
{{data.dataDeAceite | date:'yyyy'}} //2020

我想return一个字符串根据月数，所以我试了：

{{ data.dataDeAceite | date: 'M'| nomeMesPipe }}

但是没有用。

如何使用管道 return 葡萄牙语中的月份名称？

Answer 1

它不起作用，因为 angular 日期管道将 return 值作为字符串，如果您在自定义管道内将字符串转换为数字它将起作用。

试试这个：

 transform(value: any): string {
    if (value) {
      switch (
        parseFloat(value) 
      ) {
        case 0:
          value = 'Janeiro';
          break;
        case 1:
          value = 'Fevereiro';
          break;
        case 2:
          value = 'Março';
          break;
        case 3:
          value = 'Abril';
          break;
        case 4:
          value = 'Maio';
          break;
        case 5:
          value = 'Junho';
          break;
        case 6:
          value = 'Julho';
          break;
        case 7:
          value = 'Agosto';
          break;
        case 8:
          value = 'Setembro';
          break;
        case 9:
          value = 'Outubro';
          break;
        case 10:
          value = 'Novembro';
          break;
        case 11:
          value = 'Dezembro';
          break;
      }
      return value;
    }
    return '';
  }

Answer 2

Angular DatePipe returns 一个字符串，不是数字。您的开关盒会检查数字。因此，将您的案例更改为字符串或将值更改为字符串。

另一个提示：日期不是以 0 开头（所以 6 月是 6，而不是 5）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'nomeMes'
})
export class NomeMesPipe implements PipeTransform {
  transform(value: any): string {
    if (value && !isNaN(value)) {
      value = +value;
      switch (
        value // Converte o numero em nome do mês
      ) {
        case 1:
          value = 'Janeiro';
          break;
        case 2:
          value = 'Fevereiro';
          break;
        case 3:
          value = 'Março';
          break;
        case 4:
          value = 'Abril';
          break;
        case 5:
          value = 'Maio';
          break;
        case 6:
          value = 'Junho';
          break;
        case 7:
          value = 'Julho';
          break;
        case 8:
          value = 'Agosto';
          break;
        case 9:
          value = 'Setembro';
          break;
        case 10:
          value = 'Outubro';
          break;
        case 11:
          value = 'Novembro';
          break;
        case 12:
          value = 'Dezembro';
          break;
      }
      return value;
    }
  }

}

如何在 angular 中连续使用两个管道

How to use two pipes in a row in angular

pipe

angular