Angular *用于遍历包含对象的数组

双子座：

{
 A: [
{id: 5, commonName: "Abalone Pearls"},
{id: 3, commonName: "Abalone Shell"}
],
 B: [
{id: 41, commonName: "Barite"},
{id: 42, commonName: "Bastnaesite"}
]
}

HTML:

{{items.id}

---

请告诉我如何循环使用GeItems。

在您的

ngFor

周围使用双引号，以便：

<div *ngFor="let items of gemItems">

---

首先，

getItems

的定义如下：（问题中的json无效）

现在，通过使用

keyvalue

，您可以在模板中使用以下内容：

<div *ngFor="let items of getItems">
    <div *ngFor="let entry of items | keyvalue">
        <div *ngFor="let subEntry of entry.value">
            <div>{{subEntry.id}} : {{subEntry.commonName}}</div>
        </div>
    </div>
</div>

{{subEntry.id}:{{subEntry.commonName}

geitems

甚至不是一个有效的json。@NicholasK代替了geitems作为数组，我把它作为对象保存。现在正在工作。谢谢。@NicholasK我可以遍历数组，即得到A，B，但不能遍历A和B。我已经更新了我的问题。也许我下面包含的答案会有所帮助。。

  getItems = [
    {
      A: [
        { id: 5, commonName: "Abalone Pearls" },
        { id: 3, commonName: "Abalone Shell" }
      ]
    },
    {
      B: [
        { id: 41, commonName: "Barite" },
        { id: 42, commonName: "Bastnaesite" }
      ]
    }
  ];

<div *ngFor="let items of getItems">
    <div *ngFor="let entry of items | keyvalue">
        <div *ngFor="let subEntry of entry.value">
            <div>{{subEntry.id}} : {{subEntry.commonName}}</div>
        </div>
    </div>
</div>