Angular2-* ngFor /通過數組循環遍歷json對象

Question

想要遍歷json對象

//Defined on component side :
jsonObj = {
    '1' : [ {"title" : "title1" , "desc" : "desc1" }],
    '2' : [ {"title" : "title2" , "desc" : "desc2" }],
    '3' : [ {"title" : "title3" , "desc" : "desc3" }],
    '4' : [ {"title" : "title4" , "desc" : "desc4" }],
    '5' : [ {"title" : "title5" , "desc" : "desc5" }]
}

僅在模板側使用*ngFor ，而在組件側不使用任何編碼（函數） 。

要打印的只是每個title和desc

這可能嗎 ？ 如是 ？ 怎么樣 ？

Answer 1

從Angular本身找到最佳解決方案真是太好了，它提供了通過JSON循環以及其keyvalue管道

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

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

</div>

工作演示

---

以前：

組件側：

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>

工作演示