在日历的对象数组上使用ngFor

Question

我如何使用ngFor循环遍历以下对象数组并仅获取月份的名称？

{
  "Jan": {
    "name": "January",
    "short": "Jan",
    "number": 1,
    "days": 31
  },
  "Feb": {
    "name": "February",
    "short": "Feb",
    "number": 2,
    "days": 28
  },
  "Mar": {
    "name": "March",
    "short": "Mar",
    "number": 3,
    "days": 31
  },
  "Apr": {
    "name": "April",
    "short": "Apr",
    "number": 4,
    "days": 30
  },
  "May": {
    "name": "May",
    "short": "May",
    "number": 5,
    "days": 31
  },
  "Jun": {
    "name": "June",
    "short": "Jun",
    "number": 6,
    "days": 30
  },
  "Jul": {
    "name": "July",
    "short": "Jul",
    "number": 7,
    "days": 31
  },
  "Aug": {
    "name": "August",
    "short": "Aug",
    "number": 8,
    "days": 31
  },
  "Sep": {
    "name": "September",
    "short": "Sep",
    "number": 9,
    "days": 30
  },
  "Oct": {
    "name": "October",
    "short": "Oct",
    "number": 10,
    "days": 31
  },
  "Nov": {
    "name": "November",
    "short": "Nov",
    "number": 11,
    "days": 30
  },
  "Dec": {
    "name": "December",
    "short": "Dec",
    "number": 12,
    "days": 31
  }
}

这是我到目前为止所做的:

<option *ngFor="let date of dates" 
 [ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>

结果:

找不到'对象'类型的不同支持对象'[object Object]'.NgFor仅支持绑定到诸如Arrays之类的Iterables.

Answer 1

用| keyvalue管子!

angular 6.0.0将| keyvalue管道添加到渲染对象中*ngFor.

<option *ngFor="let date of dates | keyvalue" 
 [ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>

Answer 2

*ngFor不能用于循环对象属性。您需要先将对象转换为可迭代数据类型。

let dateArray = Object.values(dates) // --> [{"name": "January", "short": "Jan", ...} ...]

在标记中：

<option *ngFor="let date of dateArray" 
  [ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>

或者，如果您使用的是 6+ 版本，只需使用keyvalue管道：

<option *ngFor="let date of dates | keyvalue" 
 [ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>