Angular 5 嵌套 ngFor 使用一维数组

Question

抱歉没有给出示例，但我不确定如何创建 codepen angular 5 个示例。无论如何。我想知道是否可以使用 *ngFor 重复这个数组，但只显示一次值（没有重复）。检查我的按钮示例图像，了解它的外观。这个阵列可以吗？也许使用管道或类似的东西？

Answer 1

可能的解决方案：

首先构造你的数组：

this.array = [
    {level1: "1", level2: "1.1", level3: "1.1.1"},
    {level1: "1", level2: "1.1", level3: "1.1.2"},
    {level1: "1", level2: "1.2", level3: "1.2.1"}
];

this.fa = {}
this.array.forEach(obj => {
    if(!this.fa[obj.level1]) this.fa[obj.level1] = {};
    if(!this.fa[obj.level1][obj.level2]) this.fa[obj.level1][obj.level2] = [];
    this.fa[obj.level1][obj.level2].push(obj.level3)
})

假设您只有 3 个级别。然后你会得到如下结构：

{
    "1": {
        "1.1": [
            "1.1.1",
            "1.1.2"
        ]
    }
}

然后在模板中遍历：

<div *ngFor="let i of Object.keys(fa)">
    {{i}}
    <div *ngFor="let j of Object.keys(fa[i])">
        {{j}}    
        <div *ngFor="let k of fa[i][j]">
            {{k}}
        </div>
    </div>
</div>

不要忘记将 Object 变量绑定到您的模板，在您的组件中添加以下行：

Object = Object;

完整示例：

@Component({
    selector: 'app',
    template: `
        <div *ngFor="let i of Object.keys(fa)">
            {{i}}
            <div *ngFor="let j of Object.keys(fa[i])">
                {{j}}
                <div *ngFor="let k of fa[i][j]">
                    {{k}}
                </div>
            </div>
        </div>
    `,
})
export class AppComponent {

    array = [
        {level1: "1", level2: "1.1", level3: "1.1.1"},
        {level1: "1", level2: "1.1", level3: "1.1.2"},
        {level1: "1", level2: "1.2", level3: "1.2.1"}
    ];

    fa = {};

    Object = Object;

    constructor() {
        this.array.forEach(obj => {
            if (!this.fa[obj.level1]) this.fa[obj.level1] = {};
            if (!this.fa[obj.level1][obj.level2]) this.fa[obj.level1][obj.level2] = [];
            this.fa[obj.level1][obj.level2].push(obj.level3)
        })
    }
}

Angular 5 嵌套 ngFor 使用一维数组

Angular 5 nested ngFor using 1 dimentional array

arrays

ngfor

angular