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));

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

1 个答案: