Question

使用ngFor - Angular 4时出现

错误

当我执行功能

时，是否有人知道如何告诉控制台上显示此错误的原因

正在显示数据，但仍会显示此错误

empresas = <Empresa> {};

  constructor(private service: Service) { }

  ngOnInit() {
    this.service.getEmpresas().subscribe((res) => {
        this.empresas = res
    })
  }

模板

<tr *ngFor="let empresa of empresas">
            <td>
              {{ empresa.created_at }}
            </td>
            <td>
              {{ empresa.nome }}
            </td>
            <td class="text-center">
              {{ empresa.protocolo }}
            </td>
            <td class="text-right">
              <a [routerLink]="['/resultado']">Explorar resultado</a>
            </td>
          </tr>

HistoricoComponent.html：37错误错误：找不到差异支持'object'类型的对象'[object Object]'。仅限Ng 支持绑定到诸如Arrays之类的Iterables。在NgForOf.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.NgForOf.ngOnChanges （common.es5.js：1681） at checkAndUpdateDirectiveInline（core.es5.js：10833） at checkAndUpdateNodeInline（core.es5.js：12332） at checkAndUpdateNode（core.es5.js：12271）在debugCheckAndUpdateNode（core.es5.js：13132）在debugCheckDirectivesFn（core.es5.js：13073）在Object.eval [as updateDirectives]（HistoricoComponent.html：37） at Object.debugUpdateDirectives [as updateDirectives]（core.es5.js：13058）在checkAndUpdateView（core.es5.js：12238）在callViewAction（core.es5.js：12603）

服务

getEmpresas(): Observable<any> {
        const headers = new Headers();
        return this.http.get(`${MEAT_API}/empresas`,
            new ResponseOptions({headers: headers}))
            .map(response => response.json())

    }

Answer 1

这个错误的原因是你对不可迭代的变量进行迭代这就是ngFor失败的原因，请确保empresas是Empresa的数组，尝试安慰来自API的res以查看它是否是任何数组Empresa个对象。错误描述了自己。

NgFor仅支持绑定到诸如Arrays之类的Iterables

Answer 2

当您的getEmpresas数据返回时，res的值为对象{}

this.service.getEmpresas().subscribe((res) => {
    this.empresas = res
})

*ngFor指令无法迭代对象（除非您使用的是KeysPipe）。因此要么getEmpresas()返回一个数组，要么创建所说的KeysPipe。

示例：

import {PipeTransform, Pipe} from "@angular/core";

@Pipe({
  name: 'KeysPipe'
})
export class KeysPipe implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

用法：

*ngFor="let empresa of empresas | KeysPipe"
{{empresa.key}} {{empresa.value}}

Answer 3

getEmpresas()的响应值是一个对象，并且*ngFor无法迭代一个对象，这就是为什么必须将对象转换为数组的原因，请将empresas = []清除为空数组

this.service.getEmpresas（）。subscribe（（res）=> { this.empresas = Object.keys（res）.map（function（key）{ 返回[Number（key），res [key]]; }）; }）;

在模板中，您可以使用*ngFor遍历数组，例如

{{empresa [1] .created_at}} {{empresa [1] .nome}} {{empresa [1] .protocolo}}

Answer 4

您可以执行类似empresas any = [];

的操作

使用ngFor - Angular 4时出错

4 个答案: