Мне нужно сделать строки и столбцы в угловых 6, используя рекурсию, в которой строки могут столбцы и столбцы иметь любое количество строк

Question

Я попытался сделать это с помощью динамического HTML, но я не смог вызвать событие click в динамическом HTML.

Это то, что я пробовал

my .ts file
htmlgrid:any;
jsonData:any;
 ngOnInit(){

this.htmlgrid= this.parse(this.jsonData)

}




createRow (r) {
    return '<div  style="background-color : ' + r.color + '" class="row">' +
      (r.text ? r.text : '') + this.parse(r) + '</div>';
  }
  createColumn (c) {
    return '<div style="background - color: red;" class="col-md-' + 6 + ' test">' +
      (c.text ? c.text : '') + this.parse(c) + '<img  click="hell();"  src = "../../../../assets/img/collection.jpg" style = "height: 100px; width:auto;" />' + '</div>';
  }
  parse (s) {
    let S = '';
    if (s.rows) {
      for (let i in s.rows) {
        console.log(s.rows[ i ], 'i of data');
        S += this.createRow(s.rows[ i ]);
      }
    }
    if (s.columns) {
      for (let i in s.columns) {
        S += this.createColumn(s.columns[ i ]);
      }
    }
    console.log(S, 'value of s');
    return S;
  }

My.html file

<div class="one" [innerHtml]="htmlToAdd"></div>

этот тип JSON используется для создания строк и столбцов, у нас также есть идентификаторы и проверки строк-столбцов в нашем JSON. Пожалуйста, помогите, я застрял здесь так плохо, мне нужно сделать сетку из строк и столбцов на основе ниже json

this.jsonData={
"rows":[ 
         { 
            "columns":[ 
               { 
                  "identifier":"c1",
                  "hasRows":false,
                   "cashBack":{ 
                     "text":""
                  },
                  "title":{ 
                     "text":""
                  },
                  "images":{ 
                     "leafBanner":{ 
                        "url":"",
                        "bannerName":"",
                        "bannerType":"",
                        "bannerTarget":""
                     },
                     "listPageBanner":{ 
                        "image":"",
                        "2X":{ 
                           "height":"200px",
                           "width":"400px"
                        },
                        "3X":{ 
                           "height":"300px",
                           "width":"600px"
                        }
                     }
                  },
                  "height":"50",
                  "width":"50"
               },
               { 
                  "identifier":"c2",
                  "hasRows":false,
                  "cashBack":{ 
                     "text":""
                  },
                  "title":{ 
                     "text":""
                  },
                  "images":{ 
                     "leafBanner":{ 
                        "url":"",
                        "bannerName":"",
                        "bannerType":"",
                        "bannerTarget":""
                     },
                     "listPageBanner":{ 
                        "image":"",
                        "2X":{ 
                           "height":"200px",
                           "width":"400px"
                        },
                        "3X":{ 
                           "height":"300px",
                           "width":"600px"
                        }
                     }
                  },
                  "height":"50",
                  "width":"50"
               }
            ]
         },
         { 
            "columns":[ 
               { 
                  "identifier":"c3",
                  "hasRows":false,
                   "cashBack":{ 
                     "text":""
                  },
                  "title":{ 
                     "text":""
                  },
                  "images":{ 
                     "leafBanner":{ 
                        "url":"",
                        "bannerName":"",
                        "bannerType":"",
                        "bannerTarget":""
                     },
                     "listPageBanner":{ 
                        "image":"",
                        "2X":{ 
                           "height":"200px",
                           "width":"400px"
                        },
                        "3X":{ 
                           "height":"300px",
                           "width":"600px"
                        }
                     }
                  },
                  "height":"33",
                  "width":"33"
               },
               { 
                  "identifier":"c4",
                  "hasRows":false,
                   "cashBack":{ 
                     "text":""
                  },
                  "title":{ 
                     "text":""
                  },
                  "images":{ 
                     "leafBanner":{ 
                        "url":"",
                        "bannerName":"",
                        "bannerType":"",
                        "bannerTarget":""
                     },
                     "listPageBanner":{ 
                        "image":"",
                        "2X":{ 
                           "height":"200px",
                           "width":"400px"
                        },
                        "3X":{ 
                           "height":"300px",
                           "width":"600px"
                        }
                     }
                  },
                  "height":"33",
                  "width":"33"
               },
               { 
                  "identifier":"c5",
                  "hasRows":false,
                   "cashBack":{ 
                     "text":""
                  },
                  "title":{ 
                     "text":""
                  },
                  "images":{ 
                     "leafBanner":{ 
                        "url":"",
                        "bannerName":"",
                        "bannerType":"",
                        "bannerTarget":""
                     },
                     "listPageBanner":{ 
                        "image":"",
                        "2X":{ 
                           "height":"200px",
                           "width":"400px"
                        },
                        "3X":{ 
                           "height":"300px",
                           "width":"600px"
                        }
                     }
                  },
                  "height":"33",
                  "width":"33"
               }
            ]
         }
      ]
}

Answer 1

Вы можете определить компонент, который будет генерировать ваш HTML, и вы можете вызывать его рекурсивно

@Component({
  selector: "grid",
  template: `
    <ng-container [ngSwitch]="(data | keyvalue)[0].key">
      <ng-container *ngSwitchCase="'rows'">
        <div class="row" *ngFor="let row of data.rows">
          <grid [data]="row"></grid>
        </div>
      </ng-container>
      <ng-container *ngSwitchCase="'columns'">
        <div class="col" *ngFor="let col of data.columns">
          <grid [data]="col"></grid>
        </div>
      </ng-container>
      <ng-container *ngSwitchDefault>
        <grid [data]="data.rows" *ngIf="data.hasRows; else cell"></grid>
        <ng-template #cell>
          <div class="cell">{{ data | json }}</div>
        </ng-template>
      </ng-container>
    </ng-container>
  `,
  styles: [
    ".row{background-color:red;padding: 5px;}",
    ".col{background-color:green; padding:5px;}",
    ".cell{background-color:cyan;padding:5px;}"
  ]
})
export class GridComponent {
  @Input()
  data: any;
}

Вы можете вызвать этот компонент сетки из вашего приложения / компонента отображения, например,

<grid [data]="jsonData"></grid>

Это хороший старт, вы можете изменить регистр переключателя по умолчанию, чтобы удовлетворить ваши потребности. Я только что нашел атрибут hasRows в вашем json, если это правда, он будет рекурсивно вызывать компонент сетки обратно.

Надеюсьэто помогает, Stackblitz для вашей справки: https://stackblitz.com/edit/angular-6cqbsg