首页 文章

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

提问于
浏览 821
2

我正在尝试使用来自数据库的一些数据填充选择选项html . 但是,Angular 4给出了以下错误:

ERROR错误:无法找到'object'类型的不同支持对象'[object Object]' . NgFor仅支持绑定到诸如Arrays之类的Iterables .

我在网上看到了一些关于这个问题的答案,有些甚至在StackOverflow上,但是,我仍然无法解决它 . 这是我的代码:

JSON Object

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

Model

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>

Component

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);
        });
    }
}

Net Service Helper

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 . 任何帮助将不胜感激 .

2 回答

  • 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/') 返回类型更改为一个数组...也许:

    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

  • 1

    如果要将值组织ID映射到组织接口的ID?

    然后尝试这样 .

    <select [ngModel]="organizations.id">
        <option *ngFor="let org of organizations.organizations" [ngValue]="org.id">
            {{org.name}}
        </option>
    </select>
    
    Here you are use `[ngValue]="org.id"` that means your considering the selected value as id of the organisation seleted
    

    如果要将完整值映射到接口,请使用llike this .

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

相关问题