[英]Using ngFor on object array of calendar
How would I use ngFor to loop through the following object array and get only the names of the months? 我将如何使用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
}
}
This is what I have done so far: 到目前为止,这是我所做的:
<option *ngFor="let date of dates"
[ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>
Result: 结果:
Cannot find a differ supporting object '[object Object]' of type 'object'.
找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor only supports binding to Iterables such as Arrays.
NgFor仅支持绑定到Iterables,例如数组。
Use | keyvalue
使用
| keyvalue
| keyvalue
pipe! | keyvalue
管道!
angular 6.0.0
onwards | keyvalue
angular 6.0.0
起| keyvalue
| keyvalue
pipe added to render object in *ngFor
. | keyvalue
管道已添加到*ngFor
渲染对象。
<option *ngFor="let date of dates | keyvalue"
[ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>
*ngFor
cannot be used to loop over object properties. *ngFor
不能用于循环对象属性。 You'll need to convert the object to an iterable data type first. 您首先需要将对象转换为可迭代的数据类型。
let dateArray = Object.values(dates) // --> [{"name": "January", "short": "Jan", ...} ...]
in the markup: 在标记中:
<option *ngFor="let date of dateArray"
[ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>
or if you're using version 6+, just use the keyvalue
pipe: 或者,如果您使用的是6+版本,则只需使用
keyvalue
管道:
<option *ngFor="let date of dates | keyvalue"
[ngValue]="date.name" [(ngModel)]="dobMonth">{{ date.name }}</option>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.