如何实现for schema的循环概念(嵌套)

时间:2018-03-15 15:21:00

标签: typescript angular5

JSON架构格式,它正在响应并存储在buttonschema

{
    "Name": "Test",

    "layoutSections": [
        {
            "layoutColumns": [
                {
                    "layoutItems": [
                        {

                            "name": "test",

                        },]
                 },]
           },]
}

用于读取Json架构的Html文件

<div *ngFor="let Schema of buttonSchema?.layoutsections">
     <div *ngFor="let Schema1 of Schema?.layoutcolumns"> 
    <div *ngFor="let Schema2 of Schema1?.layoutItems">

    </div> 
    </div> 
    </div>

打字稿文件

buttonSchema: any;
 ngOnInit() {
    this.buttonSchema = this.authenticationService.buttonSchema;

**const s1 = this.buttonSchema.layoutsections; 
const s2 = s1.layoutcolumns;  
 const s3 = s2.layoutItems;**

}

如何在打字稿中实现用html实现的逻辑。

2 个答案:

答案 0 :(得分:1)

for (let i = 0; i < buttonSchema.layoutsections.length; i++) {
  for (let j = 0; j < buttonSchema.layoutsections[i].layoutcolumns.length; j++) {
    for (let k = 0; k < buttonSchema.layoutsections[i].layoutcolumns[j].layoutitems.length; k++) {
      const item = buttonSchema.layoutsections[i].layoutcolumns[j].layoutitems[k];
    }
  }
}

答案 1 :(得分:0)

试试这个

<div *ngFor="let Schema of buttonSchema.layoutsections">
     <div *ngFor="let Schema1 of Schema"> 
    <div *ngFor="let Schema2 of Schema1">

    </div> 
    </div> 
    </div>