Question

我正在开发angular 5应用程序，我想基于动态嵌套对象数组制作动态表单

`
[
    {
        "key": "unitName",
        "value": "DESKTOP"
    },
    {
        "key": "store",
        "value": "Lucan"
    },
    {
        "key": "app",
        "value": [
            {
                "key": "fullscreen",
                "value": true
            },
            {
                "key": "height",
                "value": 1920
            },
            {
                "key": "setPosition",
                "value": [
                    {
                        "key": "x",
                        "value": 25
                    },
                    {
                        "key": "y",
                        "value": 0
                    }
                ]
            },
            {
                "key": "devMode",
                "value": true
            },
            {
                "key": "disableZoom",
                "value": false
            }
        ]
    }
]
`

在这个例子中，我知道数组深度是3级所以我可以在彼此里面写3 * ngFor

但是，如果我有超过3个级别，我想知道是否有办法让它变得动态。

Answer 1

您可以按如下方式创建树视图指令：

@Component({
    selector: 'tree-view',
    template: `
        <div *ngFor="#obj of objs">
            <tree-view [objs]="obj.objs"></tree-view>
        <div>
    `,
    directives: [TreeView]
})
export class TreeView {
    @Input() 
    private objs: Array<any>;
}

有一些图书馆可以帮到你。例如：https://angular2-tree.readme.io/docs

动态嵌套* ngFor

1 个答案: