如何使用 angular datepipe 从数字中获取月份名称

Question

我想使用 angular 的日期管道显示包含（本地化）月份名称的下拉菜单。

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

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

生成的选项具有正确的值，但始终是 'January'

<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 的日期管道实现我想要的？如果是这样，我该如何完成？

Answer 1

月份必须是日期数组，可以使用

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>

Answer 2

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

The date expression: a Date object, a number (milliseconds since UTC epoch), or an ISO string

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

Answer 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>

如何使用 angular datepipe 从数字中获取月份名称

How to get monthname from number using angular datepipe

date-pipe

angular