开发者问题收集

尝试比较“[object Object]”时出错。仅允许数组和可迭代对象(Angular 5)

2018-02-05
729

当我尝试在标准 html 表中显示数组数据时遇到问题。 soa.service 中有一种方法可以获取数组中的数据。

service.

get(Type: number, Code: string): Observable<Items[]>  {
    var requestOptions = this.authService.requestOptionsWithToken();
    return this.http.get(this.serviceUrl + 'api/Get/' + Type + '/' + Code, requestOptions)
        .map(this.dataService.extractData)
        .catch(this.dataService.handleError);
}

public extractData(res: any) {
    return res.json() || [];
}

component.ts

chaptersItems: Items[] = [];

soaType: number;
soaCode: string = 'en-us';

ngOnInit() {
    this.onGet(this.Type, this.Code);
}

onGet(Type: number, Code: string) {
    this.service.get(Type, Code)
        .subscribe(
        response => {
            this.chaptersItems = response;
            console.log(this.chaptersItems);
        });

chapter.component.html

    <table>
            <tr *ngFor="let item of chaptersItems">
                <td>{{item.name}}</td>
                <td>{{item.description}}</td>
            </tr>
        </table>
1个回答

您的 API 返回的内容类似于 { enabled: true, soaChapters: [] 。您想要迭代的数组是 soaChapters 。有几种不同的方法可以处理此问题,但我会这样做:

this.soaChaptersItems = response.soaChapters;

您收到的有关 diff [object Object] 的错误是 Angular 正在尝试迭代一个对象,但这是不允许的。在这种情况下,您尝试迭代错误的内容。

Explosion Pills
2018-02-05