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

Question

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

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

CCD_ 1是从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的日期管道根本不可能实现我想要的目标吗？如果是，我该如何完成？

Answer 1

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

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

并且(看到我将[值]改变为[值]＝"I"(

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

Answer 2

从Angular文档中可以看到，日期管道的输入如下所示：

日期表达式：date对象、数字(自UTC epoch以来的毫秒数(或ISO字符串

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

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的日期管道接受可以用html构建的日期字符串。我觉得这更有可读性，而且它不会用静态数组打乱我的打字脚本：

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