如何通过 angular 9 中 *ngFor 中的 json 值循环该组？

Question

{
    "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"
        }
    ]

}

The error is: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Answer 1

You don't need to change anything in .ts file. Change only inside the html .

Assume you have responseObj .

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

Answer 2

i solved this prob on this url

code

appUrl

please check

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

it ts File

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