无法在 Angular 8 中遍历 POST 请求 JSON 响应
Can't loop through a POST request JSON response in Angular 8
我正在尝试遍历一个 JSON 对象,该对象是在对我的 REST POST 执行请求后得到的 API 但我收到以下错误:
DatetodateComponent.html:33 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngDoCheck (common.js:4377)
at checkAndUpdateDirectiveInline (core.js:27791)
at checkAndUpdateNodeInline (core.js:38472)
at checkAndUpdateNode (core.js:38411)
at debugCheckAndUpdateNode (core.js:39433)
at debugCheckDirectivesFn (core.js:39376)
at Object.eval [as updateDirectives] (DatetodateComponent.html:33)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
at checkAndUpdateView (core.js:38376)
at callViewAction (core.js:38742)
问题是在其他情况下一切正常,但在这种特殊情况下,无论我做什么我都会得到同样的错误,我已经验证了 json 数据并且它是有效的 JSON 对象,这是我的代码:
- myservice.ts
dateToDateStat(obj){
return this.http.post("http://www.example.com/api/registres/datetodate", JSON.stringify(obj), this.httpOptions);
}
- component.ts
generateStat(){
this.uploadService.dateToDateStat({'from' : '2019-12-01', 'to' : '2019-12-31'})
.subscribe(
(data)=>this.stats = data,
(err)=>console.log(err)
)
}
- template.html
<table class="table table-bordered">
<tbody>
<tr *ngFor="let ln of stats; let i = index">
<td>{{i}}</td>
<ng-template ngFor let-l [ngForOf]="ln" let-in="index">
<td>{{l.mousajal}}</td>
<td>{{l.mahkoum}}</td>
</ng-template>
</tr>
</tbody>
</table>
这是返回的 JSON
{
"\u0639\u0644\u0645\u064a \u0645\u0631\u0648\u0646\u064a \u0631\u0634\u064a\u062f\u0629": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 0,
"mahkoum": 0
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 2,
"mahkoum": 2
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 4,
"mahkoum": 0
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 14,
"mahkoum": 14
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 54,
"mahkoum": 50
}
},
"\u0628\u0648\u0634\u0647\u0627\u0628 \u0627\u0644\u0635\u062f\u064a\u0642": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 1,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 0,
"mahkoum": 0
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 1
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 1,
"mahkoum": 1
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 0,
"mahkoum": 2
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 4,
"mahkoum": 10
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 2,
"mahkoum": 11
}
},
"\u0631\u0634\u064a\u062f\u064a \u062d\u0645\u064a\u062f": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 0,
"mahkoum": 1
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 4,
"mahkoum": 10
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 2
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 1,
"mahkoum": 3
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 1,
"mahkoum": 3
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 2
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 1,
"mahkoum": 5
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 0,
"mahkoum": 0
}
},
"\u0631\u0627\u0641\u0639 \u0645\u062d\u0645\u062f\t": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 0,
"mahkoum": 0
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 0,
"mahkoum": 0
}
}
}
ngFor 仅适用于数组。你的回应不是一个数组它的对象。 Object.keys(yourObject) returns 你的对象键数组。
TS
export class AppComponent {
stats = {
'id_01': {
name: 'feyz',
lastname: 'yild'
},
'id_02': {
name: 'user2',
lastname: 'user2'
},
}
keys = Object.keys(this.stats)
ngOnInit() {
console.log('this.keys', this.keys)
}
}
HTML
<tbody>
<tr>
<td>key</td>
<td>name</td>
<td>lastname</td>
</tr>
<tr *ngFor="let key of keys">
<td>{{key}}</td>
<td>{{stats[key].name}}</td>
<td>{{stats[key].lastname}}</td>
</tr>
</tbody>
错误NgFor only supports binding to Iterables such as Arrays
可能是指返回的JSON 实际上不是数组。看起来您正在尝试循环对象的键(*ngFor
不支持。)
一种解决方案可能是在将对象送入 html 之前对其进行处理。也许像这样。
let arr = [];
// For each object entry,
Object.entries(obj).map(([key1, value1]) => {
console.log('key1', key1)
console.log('value1', value1)
// Look inside of that entry
Object.entries(value1).map(([key2, value2]) => {
console.log('key2', key2)
console.log('value2', value2)
// Push that value into arr
arr.push(value2)
});
})
// This is what ends up in arr.
console.log('end', arr)
然后在您的 html 中您可以 <tr *ngFor="let ln of arr; let i = index">
这里是 fiddle https://jsfiddle.net/alb_17la/3em4as1j/22/
在进一步挖掘之后,我发现 Angular 8 有一个名为 keyvalue
的新管道,它允许使用 *ngFor 对对象进行迭代,在我的例子中它是这样的:
<tbody>
<tr *ngFor="let ln of stats | keyvalue">
<ng-container *ngFor="let l of ln.value | keyvalue">
<td>{{l.value.mahkoum}}</td>
<td>{{l.value.mousajal}}</td>
</ng-container>
<td>{{ln.key}}</td>
</tr>
</tbody>
我正在尝试遍历一个 JSON 对象,该对象是在对我的 REST POST 执行请求后得到的 API 但我收到以下错误:
DatetodateComponent.html:33 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.ngDoCheck (common.js:4377)
at checkAndUpdateDirectiveInline (core.js:27791)
at checkAndUpdateNodeInline (core.js:38472)
at checkAndUpdateNode (core.js:38411)
at debugCheckAndUpdateNode (core.js:39433)
at debugCheckDirectivesFn (core.js:39376)
at Object.eval [as updateDirectives] (DatetodateComponent.html:33)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
at checkAndUpdateView (core.js:38376)
at callViewAction (core.js:38742)
问题是在其他情况下一切正常,但在这种特殊情况下,无论我做什么我都会得到同样的错误,我已经验证了 json 数据并且它是有效的 JSON 对象,这是我的代码:
- myservice.ts
dateToDateStat(obj){
return this.http.post("http://www.example.com/api/registres/datetodate", JSON.stringify(obj), this.httpOptions);
}
- component.ts
generateStat(){
this.uploadService.dateToDateStat({'from' : '2019-12-01', 'to' : '2019-12-31'})
.subscribe(
(data)=>this.stats = data,
(err)=>console.log(err)
)
}
- template.html
<table class="table table-bordered">
<tbody>
<tr *ngFor="let ln of stats; let i = index">
<td>{{i}}</td>
<ng-template ngFor let-l [ngForOf]="ln" let-in="index">
<td>{{l.mousajal}}</td>
<td>{{l.mahkoum}}</td>
</ng-template>
</tr>
</tbody>
</table>
这是返回的 JSON
{
"\u0639\u0644\u0645\u064a \u0645\u0631\u0648\u0646\u064a \u0631\u0634\u064a\u062f\u0629": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 0,
"mahkoum": 0
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 2,
"mahkoum": 2
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 4,
"mahkoum": 0
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 14,
"mahkoum": 14
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 54,
"mahkoum": 50
}
},
"\u0628\u0648\u0634\u0647\u0627\u0628 \u0627\u0644\u0635\u062f\u064a\u0642": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 1,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 0,
"mahkoum": 0
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 1
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 1,
"mahkoum": 1
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 0,
"mahkoum": 2
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 4,
"mahkoum": 10
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 2,
"mahkoum": 11
}
},
"\u0631\u0634\u064a\u062f\u064a \u062d\u0645\u064a\u062f": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 0,
"mahkoum": 1
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 4,
"mahkoum": 10
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 2
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 1,
"mahkoum": 3
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 1,
"mahkoum": 3
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 2
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 1,
"mahkoum": 5
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 0,
"mahkoum": 0
}
},
"\u0631\u0627\u0641\u0639 \u0645\u062d\u0645\u062f\t": {
"\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
"mousajal": 0,
"mahkoum": 0
},
"\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
"mousajal": 0,
"mahkoum": 0
},
"\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
"mousajal": 0,
"mahkoum": 0
}
}
}
ngFor 仅适用于数组。你的回应不是一个数组它的对象。 Object.keys(yourObject) returns 你的对象键数组。
TS
export class AppComponent {
stats = {
'id_01': {
name: 'feyz',
lastname: 'yild'
},
'id_02': {
name: 'user2',
lastname: 'user2'
},
}
keys = Object.keys(this.stats)
ngOnInit() {
console.log('this.keys', this.keys)
}
}
HTML
<tbody>
<tr>
<td>key</td>
<td>name</td>
<td>lastname</td>
</tr>
<tr *ngFor="let key of keys">
<td>{{key}}</td>
<td>{{stats[key].name}}</td>
<td>{{stats[key].lastname}}</td>
</tr>
</tbody>
错误NgFor only supports binding to Iterables such as Arrays
可能是指返回的JSON 实际上不是数组。看起来您正在尝试循环对象的键(*ngFor
不支持。)
一种解决方案可能是在将对象送入 html 之前对其进行处理。也许像这样。
let arr = [];
// For each object entry,
Object.entries(obj).map(([key1, value1]) => {
console.log('key1', key1)
console.log('value1', value1)
// Look inside of that entry
Object.entries(value1).map(([key2, value2]) => {
console.log('key2', key2)
console.log('value2', value2)
// Push that value into arr
arr.push(value2)
});
})
// This is what ends up in arr.
console.log('end', arr)
然后在您的 html 中您可以 <tr *ngFor="let ln of arr; let i = index">
这里是 fiddle https://jsfiddle.net/alb_17la/3em4as1j/22/
在进一步挖掘之后,我发现 Angular 8 有一个名为 keyvalue
的新管道,它允许使用 *ngFor 对对象进行迭代,在我的例子中它是这样的:
<tbody>
<tr *ngFor="let ln of stats | keyvalue">
<ng-container *ngFor="let l of ln.value | keyvalue">
<td>{{l.value.mahkoum}}</td>
<td>{{l.value.mousajal}}</td>
</ng-container>
<td>{{ln.key}}</td>
</tr>
</tbody>