找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如带有异步管道的数组

Question

.html

 <ion-select-option value="t.result[i].id" *ngFor="let t of (issueTypes$ | async); let i = index ">
            {{t.result[i].name}}
 </ion-select-option>

.ts

this.issueTypes$ = this.maintenanceService.get();

邮递员：

{
    "result": [
        {
            "id": "KT5c6wdb8ecd94e",
            "name": "Need Batteries"
        },
        {
            "id": "RT5c6aa12600134",
            "name": "A/C Not working"
        }
    ]
}

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3161) at checkAndUpdateDirectiveInline (core.js:22004) at checkAndUpdateNodeInline (core.js:23265) at checkAndUpdateNode (core.js:23227) at debugCheckAndUpdateNode (core.js:23861) at debugCheckDirectivesFn (core.js:23821) at Object.eval [as updateDirectives] (MaintenancePage.html:19) at Object.debugUpdateDirectives [as updateDirectives] (core.js:23813) at checkAndUpdateView (core.js:23209) at callViewAction (core.js:23450)

你能告诉我这里的问题吗？

Answer 1

问题是您正在尝试迭代结果对象。你需要更深入一点。因此，将您的代码更改为以下内容：

<ion-select-option value="t.id" *ngFor="let t of (issueTypes$ | async)?.result; let i = index ">
            {{t.name}}
 </ion-select-option>

Answer 2

根据邮递员的 json 模型，您应该迭代 result 属性，这是返回模型中的数组。

*ngFor="let t of (issueTypes$ | async)?.result; let i = index"

然后包含html里面可以直接访问t里面包含了数组中的对象。索引变量 i 也不再需要。

{{t.name}}

找不到类型 'object' 的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如带有异步管道的数组

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays with Async pipe

rxjs

typescript

angular

ionic4

angular7