Angular 5 NgFor 仅支持绑定到可迭代对象，例如数组 [重复]答案

【问题标题】：Angular 5 NgFor only supports binding to Iterables such as Arrays [duplicate]Angular 5 NgFor 仅支持绑定到可迭代对象，例如数组 [重复]
【发布时间】：2018-02-07 23:12:37
【问题描述】：

我在尝试打印所有数据库记录时收到Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 错误。

我已使用此source 从 firebase 获取数据。不知何故，它不起作用。是我的 json 文件结构错误还是数组的类型应该不同？我做错了什么？

firebase (json)

{
  "clients" : {
    "-L4jvQwBFM0W8A928waj" : {
      "id" : "124",
      "lastName" : "sda421",
      "name" : "412"
    },
    "-L4jz52GfcU4ZsJx_LX0" : {
      "id" : "214",
      "lastName" : "sda ",
      "name" : "sad "
    },
    "-L4k-5xNmN4dalqFj2dB" : {
      "id" : "12345678",
      "lastName" : "Pafasfbin",
      "name" : "fasf"
    },
    "-L4k-Dw5TA6FnHpWDiIq" : {
      "id" : "52353235",
      "lastName" : "qweqw",
      "name" : "qwrqwe "
    }
  }
}

clients.component.ts

import { Component, OnInit } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database' ;
import { Observable } from 'rxjs';


@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
  // clients: any[];
  clients: Observable<any[]>;

  name: string;
  lastName: string;
  id: number;

  constructor(public db: AngularFireDatabase) { }

  ngOnInit() {
    this.getData();
  }

  getData(){
    this.clients = this.db.list('/clients').valueChanges();
    console.log(this.clients);
  }
}

clients.component.html

<ul>
  <li *ngFor="let i of clients">
    <label>name: </label> {{ i.name }}
    <label>lastName: </label> {{ i.lastName }}
    <label>ID: </label> {{ i.id }}
    </li>
</ul>

【问题讨论】：

您需要将clients 更改为列表，必要时将散列移动为对象中的值。
为什么你不将数据作为列表检索？ github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md
@Eliseo 所做的一切几乎与您提供的源代码相同。
@bennn123，请注意您发布的链接是“以对象形式检索数据”，我发布的链接是“以列表形式检索数据”

标签： angular firebase firebase-realtime-database angularfire2

【解决方案1】：

在 Angular2+ 中，

你不能通过 ngFor 遍历 json 对象，值应该是 Iterables such as Arrays 但在你的情况下它是 object ，如果你仍然想要遍历对象，你可以根据你的做这样的事情回应

组件端：

objectKeys = Object.keys;

模板端：

<ul>
  <li *ngFor="let key of objectKeys(clients)">
    <label>name: </label> {{ clients[key].name }}
    <label>lastName: </label> {{ clients[key].lastName }}
    <label>ID: </label> {{ clients[key].id }}
    </li>
</ul>

WORKING DEMO

【讨论】：

【解决方案2】：

查看以下代码 sn-p。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  clients:any;
  data=`{
  "clients" : {
    "-L4jvQwBFM0W8A928waj" : {
      "id" : "124",
      "lastName" : "sda421",
      "name" : "412"
    },
    "-L4jz52GfcU4ZsJx_LX0" : {
      "id" : "214",
      "lastName" : "sda ",
      "name" : "sad "
    },
    "-L4k-5xNmN4dalqFj2dB" : {
      "id" : "12345678",
      "lastName" : "Pafasfbin",
      "name" : "fasf"
    },
    "-L4k-Dw5TA6FnHpWDiIq" : {
      "id" : "52353235",
      "lastName" : "qweqw",
      "name" : "qwrqwe "
    }
  }
}`
objectKeys;
 ngOnInit(){
    this.objectKeys = Object.keys;
   this.clients=JSON.parse(this.data).clients;
   console.log(this.clients);
 }

}

<ul>
  <li *ngFor="let i of objectKeys(clients)">

    <label>name: </label> {{ clients[i].name }}
    <label>lastName: </label> {{ clients[i].lastName }}
    <label>ID: </label> {{ clients[i].id }}
    </li>
</ul>

DEMO

【讨论】：