且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Angular2-* ngFor/通过数组遍历json对象

更新时间:2023-01-16 23:13:12

从Angular本身找到***解决方案真是太好了,它提供了通过JSON及其keyvalue

So great to find the best solution from Angular itself provides pipe to loop through JSON , and its keyvalue

<div *ngFor='let item of jsonObj | keyvalue'>
   Key: {{item.key}}

    <div *ngFor='let obj of item.value'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

工作演示

WORKIGN DEMO

以前:

组件侧:

objectKeys = Object.keys;

模板端:

<div *ngFor='let key of objectKeys(jsonObj)'>
   Key: {{key}}

    <div *ngFor='let obj of jsonObj[key]'>
        {{ obj.title }}
        {{ obj.desc }}
    </div>

</div>

工作演示

WORKING DEMO