如何在 Angular 9 中按 *ngFor 中的 json 值循环该组？答案

【问题标题】：How to loop this Group by json value in *ngFor in angular 9?如何在 Angular 9 中按 *ngFor 中的 json 值循环该组？
【发布时间】：2020-11-04 17:47:08
【问题描述】：

{
    "ABC 111": [
        {
            "id": 01,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        },
        {
            "id": 02,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        }
    ],
    "XYZ 222": [
        {
            "id": 01,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        },
        {
            "id": 02,
            "valueOne": 50,
            "valueTwo": "string",
            "valuethree": "string"
        }
    ]

}

错误是：找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

【问题讨论】：

您需要遍历变量TN 47 RG 7845，因为它是数组，而不是对象。
变量不断变化。

标签： angular

【解决方案1】：

您无需更改 .ts 文件中的任何内容。仅在 html 内更改。

假设您有 responseObj。

  <div *ngFor="let obj of responseObj | keyvalue">
        <div *ngFor="let item of obj.value">
            {{item.id}}
        </div>
    </div>

【讨论】：

如何在上面的json中绑定值“ABC 111”和“XYZ 222”？
使用obj.key绑定值

【解决方案2】：

i 在这个 url 上解决了这个问题

code

appUrl

请检查

<div *ngFor="let obj of  tesObj ">
        <div *ngFor="let item of obj">
          {{item|json}}
        </div>
</div>

它的文件

tesObj=Array.from(Object['values'](this.originalObj))

【讨论】：