Angular *ngFor 对象数组返回 [错误：找不到不同的支持对象]

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> 

我可以如何正确实现上述内容？从逻辑上讲，它应该可以正常工作！因为类似的 console.log 给出了正确的结果。 在进行大量研究时，我偶然发现了这个主题：https://github.com/angular/angular/issues/6392

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

非常感谢！

Answer 1

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

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