如何使用角度日期管道从数字中获取月份名称答案

【问题标题】：How to get monthname from number using angular datepipe如何使用角度日期管道从数字中获取月份名称
【发布时间】：2020-07-10 08:28:10
【问题描述】：

我想使用 Angular 的日期管道显示一个包含（本地化）月份名称的下拉列表。

<select>
    <option *ngFor="let month of months;" value="{{month}}">
         {{month | date: 'MMMM'}}
    </option>
</select>

months 是一个从 0 到 11 的数字数组。

生成的选项具有正确的值，但始终为“一月”

<select>
     <option value="0"></option>
     <option value="1"> January</option>
     <option value="2"> January</option>
     <option value="3"> January</option>
     <option value="4"> January</option>
     <option value="5"> January</option>
     <option value="6"> January</option>
     <option value="7"> January</option>
     <option value="8"> January</option>
     <option value="9"> January</option>
     <option value="10"> January</option>
     <option value="11"> January</option>
</select>

我的代码有问题还是根本不可能使用 Angular 的日期管道来实现我想要的？如果是这样，我该如何完成？

【问题讨论】：

标签： angular date-pipe

【解决方案1】：

months 必须是 Dates 数组，可以使用

months=[0,1,2,3,4,5,6,7,8,9,10,11].map(x=>new Date(2000,x,2))

并且（看到我将 [value] 更改为 [value]="i"）

<select>
    <option *ngFor="let month of months;let i=index" [value]="i">
         {{month | date: 'MMMM'}}
    </option>
</select>

【讨论】：

【解决方案2】：

从Angular documentation 中可以看出，日期管道的输入是以下之一：

日期表达式：日期对象、数字（自 UTC 纪元以来的毫秒数）或 ISO 字符串

因此，您输入的 0-11 被解释为 1970 年 1 月 01 日之后的毫秒数。因此，它们都在 1 月。您可能应该创建一个 Date 对象数组以用作months[]。

【讨论】：

【解决方案3】：

我发现自己在我的应用程序中经常生成数组，以至于我创建了一个 to 管道：

export class ToPipe implements PipeTransform {

  transform(value: number, args?: number): number[] {
    const ret = [];
    for (let i = value; i <= args ; i++) {
      ret.push(i);
    }
    return ret;
  }
}

Angular's date pipe 接受可以在 html 中构造的日期字符串。我发现这更具可读性，并且不会使我的打字稿与静态数组混淆：

<select>
  <option *ngFor="let monthNum of 1 | to : 12" [value]="monthNum">{{('2020-' + monthNum + '-01') | date: 'MMM'}}</option>
</select>

【讨论】：