尝试区分“[object Object]"时出错.angular 中只允许使用数组和可迭代对象 [英] Error trying to diff '[object Object]'. Only arrays and iterables are allowed in angular
问题描述
我正在尝试在前端显示数据,但出现上述错误.如何解决这个问题?
<块引用>service.ts
rec_source(){var headers = new HttpHeaders().set('Authorization', 'Token' + localStorage.getItem('usertoken'));headers.append('Accept', 'application/json');变量选项 = {标题:标题};return this.httpClient.get('api/recruit/fetch_recruitment_details',options)}
<块引用>
component.ts
sources:any = [];构造函数(私有身份验证:AuthService){}ngOnInit() {this.Authentication.rec_source().订阅(来源=> {this.sources = 来源;});}
<块引用>
component.html
<头><tr><th>数据</th></tr></thead><tr *ngFor="let source of sources"><td>{{source}}</td></tr></tbody>
//需要显示的数据
//错误
您的 api 响应不是数组或可迭代的,即错误所说的内容.它是对象,不能用 *ngFor
迭代.也许您想迭代 data_candidate_source
或 data_new_hiredate
.在这种情况下,您需要为组件中的 source
属性分配正确的属性:
this.sources = source.data_candidate_source
或者当你想遍历对象时,你可以使用新添加的键值管道.
I'm trying to display the data on the front end but i get the above error. How to resolve this?
service.ts
rec_source(){
var headers = new HttpHeaders().set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
headers.append('Accept', 'application/json');
var options = {
headers: headers
};
return this.httpClient.get('api/recruit/fetch_recruitment_details',options)
}
component.ts
sources:any = [];
constructor(private Authentication:AuthService) { }
ngOnInit() {
this.Authentication.rec_source()
.subscribe(source => {
this.sources = source;
});
}
component.html
<table *ngIf="sources" class="row-border hover">
<thead>
<tr>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let source of sources">
<td>{{ source}}</td>
</tr>
</tbody>
</table>
//the data that needs to be displayed
//the error
Your api response is not an array or iterable, that what the error says. It is object, which is not iterable with *ngFor
. Maybe you wanted to iterate data_candidate_source
or data_new_hiredate
. In such case you need to assign correct property to your source
property in component:
this.sources = source.data_candidate_source
Or when you want to iterate through object then you can use newly added keyvalue pipe.
这篇关于尝试区分“[object Object]"时出错.angular 中只允许使用数组和可迭代对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!