使用 ngFor - Angular 4 时发生错误答案

【问题标题】：error occurs when using ngFor - Angular 4使用 ngFor - Angular 4 时发生错误
【发布时间】：2023-04-02 14:58:02
【问题描述】：

使用 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 错误：找不到不同的支持“对象”类型的对象“[对象对象]”。仅适用于 Ng 支持绑定到 Iterables，例如 Arrays。在 NgForOf.webpackJsonp.../../../common/@angular/common.es5.js.NgForOf.ngOnChanges (common.es5.js:1681) 在 checkAndUpdateDirectiveInline (core.es5.js:10833) 在 checkAndUpdateNodeInline (core.es5.js:12332) 在 checkAndUpdateNode (core.es5.js:12271) 在 debugCheckAndUpdateNode (core.es5.js:13132) 在 debugCheckDirectivesFn (core.es5.js:13073) 在 Object.eval [as updateDirectives] (HistoricoComponent.html:37) 在 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())

    }

【问题讨论】：

你能显示被调用的服务方法是否返回一个数组或对象你在http服务中调用了res.json()
因为 ngFor 只遍历数组项，我可以看到你有对象。

标签： angular

【解决方案1】：

这个错误的原因是你迭代了不可迭代的变量。
这就是 ngFor 失败的原因，确保 empresas 是 Empresa 的数组，尝试从 API 中调整 res 以查看它是否是 Empresa 对象的任何数组。错误描述了自身。

NgFor 只支持绑定到数组等 Iterables

【讨论】：

很高兴它有帮助:)

【解决方案2】：

当你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}}

【讨论】：

【解决方案3】：

你可以做类似empresas any = [];

【讨论】：

【解决方案4】：

您将getEmpresas() 的响应值分配为一个对象，而*ngFor 无法迭代一个对象，因此您必须声明一个数组，将empresas:any=[]` 声明为一个空数组。

this.service.getEmpresas().subscribe(res=>this.empresas=res);

在模板中可以使用*ngForlike遍历数组

<tr *ngFor="let empresa of empresas">
>     <td>
>         {{ empresa.created_at }}
>     </td>
>     <td>
>         {{ empresa.nome }}
>     </td>
>     <td class="text-center">
>         {{ empresa.protocolo }}
>     </td>
 </tr>

【讨论】：