在角度迭代JSON数组

时间:2020-07-05 19:46:44

标签: html json angular user-interface

我有一个如下所示的Json字符串。

{
    "testdata": [{
            "id": 1,
            "name": "testname1 ",
            "description": "test description1"
        },
        {
            "id": 2,
            "name": "testname2 ",
            "description": "test description2"
        },
        {
            "id": 3,
            "name": "testname3 ",
            "description": "test description3"
        }
    ],
    "dummydata": [{
            "category": "Test with dummy data",
            "testdata": [{
                "id": 5,
                "name": "testname1",
                "description": "test description1."
            }],
            "testnos": 12,
            "testresult": "success"
        },

        {
            "category": "Test with original data",
            "testdata": [{
                "id": 7,
                "name": "testname3",
                "description": "test description3."
            }],
            "testnos": 19,
            "testresult": "success"
        }
    ],
    "valueofcoding": 22,
    "valueoftesting": 21,
    "valueofbugfix": 6

}

这是我如何在我的angular类中获取json响应的方法。我不确定如何使用angular显示html中的值。

 <tr *ngFor="let data of dataArray">
        <td  class="my-table-header"><span class="badge badge-light">Values</span></td>
        <td class="cntr"><input type="text" readonly class="form-control-plaintext my-table-header-val"  value="{{data.valueofcoding}}"/></td>
        <td class="cntr"><input type="text" readonly class="form-control-plaintext my-table-header-val" value="{{data.valueoftesting}}"/></td>
<tr>

valueofCoding和valueoftesting不属于array数组的一部分。因此,我确实喜欢上面的方法,但是却遇到了错误。

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

我看过一些帖子,给出了同样的错误。但是这种json格式完全不同且复杂。请帮助我解决这个问题。

1 个答案:

答案 0 :(得分:4)

dataArrayObject,而*ngForarray一起使用,因此,如果要迭代遍历html中的对象,可以使用{{1} }和*ngFor管道,因此您可以尝试这样。

keyvalue
相关问题