如何迭代 Angular 中的嵌套 JSON

Question

我正在使用 Angular7 和 ngx-translate。

i18n/en.json 看起来像这样：

{
    "items": {
        "a1": "first",
        "a2": "second",
        "a3": "third"
    },
    "nesteditems": {
        "n1": {
            "f1": "nested11",
            "f2": "nested12",
            "f3": "nested13"
        },
        "n2": {
            "f1": "nested21",
            "f2": "nested22",
            "f3": "nested23"
        },
        "n3": {
            "f1": "nested31",
            "f2": "nested32",
            "f3": "nested33",
            "f4": "nested34"
        }
    }
}

有没有办法使用 ngFor 或其他一些指令来迭代 "items" 和 "nesteditems" 来显示它们？

Answer 1

如果你真的想坚持使用 ngFor 迭代它，你可以在 angular 7 中使用键值管道两次。

<div *ngFor="let item of nesteditems | keyvalue">    
     <div *ngFor="let innerItem of item.value | keyvalue">
      {{innerItem .key}}:{{innerItem .value}}
    </div>
</div>

现在另一个建议是考虑以某种方式将 nestedItems 展平到一个数组中，现在我不知道你的数据的形状，所以这可能不合理。

如何迭代 Angular 中的嵌套 JSON

How to iterate over nested JSON in Angular

ngx-translate

angular7