Angular *ngFor Array of Objects returning [ERROR: Cannot find a differ supporting object]

Question

我正在尝试在 HTML 中显示如下数据列表：

Home.ts:

this.key = 0
objects = {} // The correct setting was objects = [] thanks!

snapshot.forEach(doc => {

          this.objects[this.key] = {
            firstname: doc.id,
            lastname: doc.data().lastname,
            age: doc.data().age
          }

          this.key=this.key+1;
        }

在 JSON 中显示时会产生以下结果：

console.log(JSON.stringify(this.objects));

// RESULT OF THE CONSOLE:

{
 "0":
    {
        "firstname":"james",
        "lastname":"bond",
        "age":"87"
    },

 "1":
    {
        "firstname":"alex",
        "lastname":"tali",
        "age":"59"
    }
 }

现在当我使用：

console.log(this.objects[0].firstname);

// The Result displays:
james

这是正确的行为！但是，当尝试使用 *ngFor 在 HTML 中显示列表时，出现错误：找不到不同的支持对象。

这是我在 Home.html HTML/IONIC 中的代码：

    <ion-grid>
      <ion-row>
        <ion-col col-4>First Name</ion-col>
        <ion-col col-4>Last Name</ion-col>
        <ion-col col-4>Age</ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-4 *ngFor="let firstname of objects; let i = index">{{ objects[i].firstname }}</ion-col>
        <ion-col col-4 *ngFor="let lastname of objects; let i = index">{{ objects[i].lastname }}</ion-col>
        <ion-col col-4 *ngFor="let age of objects; let i = index">{{ objects[i].age }}</ion-col>
      </ion-row>
    </ion-grid>

我怎样才能正确地实现上面的内容？从逻辑上讲，它应该工作得很好！ as similar console.log 给出了正确的结果。在做大量研究时，我偶然发现了这个话题：https://github.com/angular/angular/issues/6392

老实说，我也不确定它是否适合我的问题。

非常感谢！

Answer 1

正如错误所说，对象应该是一个 array 个对象，根据你的 JSON 它是一个对象的对象。您需要有适当的 JSON 数组，或转换为对象数组。

console.log(JSON.stringify(this.global.objects));

Angular *ngFor Array of Objects returning [ERROR: Cannot find a differ supporting object]

Angular *ngFor Array of Objects returning [ERROR: Cannot find a differ supporting object]

ionic-framework

ngfor

angular