传递数组时出现ngFor throw错误

时间:2017-09-04 19:55:47

标签: html angular typescript

我有对象Categories(id,name),我在Angular上得到这样的结果:

this.categories = new Array<Category>();

this.http
    .get(ApiConfig.API_URL + 'getCategories')
    .toPromise()
    .then(response => this.categories = response.json())
    .catch(_ => console.log("error getting categories"));

对象Categories.ts:

export class Category
{
    constructor(
        public id: string,
        public name: string)
    { }
}

我试图将它们作为选项放在自动完成字段上,如下所示:

<div>
  <md-form-field>
    <input type="text" mdInput [mdAutocomplete]="auto">
  </md-form-field>
  <md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let category of categories">
      {{ category.name }}
    </md-option>
  </md-autocomplete>
</div>

但是我收到以下错误

  

尝试区分[object object]&#39;时出错。只允许数组和迭代

我试过

<md-option *ngFor="let category of categories" [value]="category.id" [label]="category.name">

但它仍然抛出同样的错误,我做错了什么?

1 个答案:

答案 0 :(得分:0)

添加一个console.log(this.categories),您将获得响应,然后查看分配给类别的内容。我确信你以错误的方式解析它。