使用 'ngFor' 指令浏览月份数组

Question

我对 Angular 2 和打字稿缺乏了解导致我遇到了这个问题：

我想要一个数据表（已经导入好），横坐标是一年中的所有月份，纵坐标是一些数据库对象（这没问题）。

我不知道如何以及在何处声明我的月份列表以及如何在我的 html 中浏览它。这一刻，我有这个：

Component.ts :

  public months= {
    1:'Janvier',
    2:'Février',
    3:'Avril',
    etc...
    12:'Decembre'
  };

Component.html

<td *ngFor="let month of months">{{month}}</td>

你能帮我让它工作（至少显示几个月的原始数据）并且尽可能干净吗？我很确定直接在 class 中声明月份列表不是一件好事...

感谢阅读

Answer 1

你必须制作一个月份数组。目前你有一个对象。

public months = ["Janvier", "Février", "Avril"...];

或者如果你真的想要一个对象，你可以实现自定义管道：

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

@Pipe({
   name: 'keyObject'
})
@Injectable()
export class KeyObjectPipe {

transform(value, args:string[]):any {
    let keys = [];
    for (let key in value) {
        keys.push({key: key, value: value[key]});
    }
    return keys;
}
}

然后您可以将其用作：

<td *ngFor="let month of months | keyObject">{{month.value}}</td>

Answer 2

或者，您可以使用这种方式

months= [
      { 'id' :1 , 'name':'Janvier'},
      { 'id' :2 , 'name':'Février'},
      { 'id' :3 , 'name':'Avril'}
    ];

在 ngFor 中访问它，如下所示

<div *ngFor="let month in months">
      {{month.name}}</div>
</div>

Answer 3

为什么不在您的视图中使用索引？

在你的 TS 中：

months = ["Janvier", "Février", "Avril"...];

在你的HTML中：

<div *ngFor="let month of months; let i = index">
        <p>Month(string): {{month}}</p>
        <p>Month(number): {{i+1}}</p>
</div>

使用 'ngFor' 指令浏览月份数组

Browse an array of months with 'ngFor' directive

arrays

binding

typescript

ngfor

angular