1

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

4

3 回答 3

5

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

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>
于 2020-07-10T08:34:36.050 回答
1

正如您从Angular 文档中所读到的，日期管道的输入是以下之一：

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

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

于 2020-07-10T08:35:04.393 回答
0

我发现自己在我的应用程序中经常生成数组，以至于我创建了一个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>
于 2021-12-29T15:58:13.800 回答