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

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

我想要使用的模型

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.

回答(1)

2 years ago

看起来 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);
      }
    )