如何使用 *ngFor 处理 Angular 4 上的对象？

Question

我正在尝试使用来自数据库的一些数据来填充 select 选项 html。但是，Angular 4 给我以下错误：

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我在网上看到了一些关于这个问题的答案，甚至在Whosebug上也看到了一些答案，但是，我仍然无法解决。这是我的代码：

JSON 对象

{
"organizations": [
    {
        "id": 1,
        "organizationTypeId": 1,
        "name": "Hello",
        "abbreviation": "H"
    },
    {
        "id": 2,
        "organizationTypeId": 1,
        "name": "Test",
        "abbreviation": "T"
    }
  ]
}

型号

export interface Organization {
id: number;
organizationTypeId: number;
name: string;
abbreviation: string;

}

HTML

<select [ngModel]="organizations">
    <option *ngFor="let org of organizations" [ngValue]="org.id">
        {{org.name}}
    </option>
</select>

组件

export class UserAdditionalComponent implements OnInit  {

public organizations: Organization[];

ngOnInit(): void {

    this.net.get<Organization[]>(`Organization/GetAllUniversities/`).subscribe(t => {
        this.organizations = t;
            console.log(this.organizations);
            console.log(JSON.stringify(this.organizations, null, 4));
    }, err => {
        this.toasterService.pop('error', 'Erro', err.message);
        this.loaderService.display(false);
        });
    }
}

网络服务助手

get<T>(url: string): Observable<T> {
    let options = this.doHeaders();
    return this.doSub(this.http.get(this.doUrl(url), options));
}

private extractData(res: Response) {
    try {
        let body = res.json();
        return body || [];
    }
    catch (ex) {
        return {
            isOk:res.ok,
            status: res.status,
            message:res.statusText
        }
    }
}

我想保留通用的 Net Service Helper，因为它被用于应用程序的许多其他部分。我不确定如何处理 Object 和 *ngFor。任何帮助将不胜感激。

Answer 1

好吧，如果 this.organizations 正好等于以下内容（如您的问题）：

{
"organizations": [
    {
        "id": 1,
        "organizationTypeId": 1,
        "name": "Hello",
        "abbreviation": "H"
    },
    {
        "id": 2,
        "organizationTypeId": 1,
        "name": "Test",
        "abbreviation": "T"
    }
  ]
}

那么这个错误是有道理的，因为有一个对象封装了你的 organizations 数组......所以你必须这样做：ngFor="let org of this.organizations.organizations".

或者将您的 this.net.get<Organization[]>('Organization/GetAllUniversities/') return 类型更改为数组...也许：

private extractData(res: Response) {
  try {
    let body = res.json();
    return body.organizations || [];
   }
  ...

最好的方法是改变

关于组件： this.organizations; 到 this.data

在 HTML 上： *ngFor=let org of organizations 到 *ngFor=let org of data.organizations

如何使用 *ngFor 处理 Angular 4 上的对象？

How to deal with Objects on Angular 4 using *ngFor?

typescript

ngfor

angular