首页 文章

Angular 5 Component to Template ERROR [object Object] NgFor仅支持绑定到Iterables，例如Arrays

提问于
浏览 次
-1

我试图从组件中获取数据到模板并循环它 .

我想要使用的模型

export class arsCodes {
  iD: number;   
  aRSCode: string;
  aRSDescription: string;
  class: string;
  victimFlag: string;
  startDate: string;
  endDate: string;
  createdByUserID: string;
  createdOnDateTime: string;
  modifiedByUserID: string;
  modifiedOnDateTime: string;
}

然后我没有得到错误就无法使用它

arsCodes: arsCodes[];

那么我用 any 的类型

referrals: any;

致电服务

this.arsSevice.getArsCodesApi(this.model)
    .subscribe(
        result => {
            //this.arsCode = result
            this.referrals = result;
            console.log('component',result);
        },
        error => {
            console.log(error);
        }
    )

component {Status：“success”，Message：“”，data：Array（16）}

最后我的模板HTML循环

<tr *ngFor="let ars of referrals; let i = index">
   <td>{{i + 1}}</td>
   <td>{{ars.arsCode}}</td>
   <td>{{ars.description}}</td>
   <td>{{ars.class}}</td>
   <td>{{ars.startDate}}</td>
   <td>{{ars.endDate}}</td>
</tr>

我希望数据能够通过console.log来实现

Image Screenshot of data from console.log

但我得到这个错误：

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

1 回答

  • 0

    看起来 arsCodes 是一个接口（https://angular-2-training-book.rangle.io/handout/features/interfaces.html）：

    接口是TypeScript工件，它不是ECMAScript的一部分 . 接口是一种根据参数及其类型定义函数 Contract 的方法 . 除了函数之外，接口也可以与Class一起使用以定义自定义类型 .

    您应该导出 arsCodes as

    export interface arsCodes {
  iD: number;   
  ...
}

    有了这个， arsCodes: arsCodes[]; 应该工作 .

    在您的服务中，您可以使用 map 仅返回数组：

    this.arsSevice.getArsCodesApi(this.model)
    .map((res): arsCodes[] => res.data)
    .subscribe((result: arsCodes[]) => {
      this.arsCodes = result
      console.log('component',result);
      },
      error => {
        console.log(error);
      }
    )
    回复于

相关问题