首页 文章

使用ngFor - Angular 4时出错

提问于
浏览 次
1

使用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 ERROR错误：无法找到'object'类型的不同支持对象'[object Object]' . NgFor仅支持绑定到诸如Arrays之类的Iterables . 在checkAndUpdateNodeInline的checkAndUpdateDirectiveInline（core.es5.js：10833）的NgForOf.webpackJsonp ... / .. / .. / common/@angular/common.es5.js.NgForOf.ngOnChanges(common.es5.js:1681） （core.es5.js：12332）在checkAndUpdateNode（core.es5.js：12271）的debugCheckAndUpdateNode（core.es5.js：13132）的debugCheckDirectivesFn（core.es5.js：13073）at Object.eval [as updateDirectives] （HistoricoComponent.html：37）位于checkAndUpdateView（core.es5.js：12238）的Object.debugUpdateDirectives [as updateDirectives]（core.es5.js：13058），位于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())

    }
angular

3 回答

  • 0

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

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

    回复于
  • 1

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

    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}}
    回复于
  • 0

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

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

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

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

    回复于

相关问题