Javascript 我需要使用递归在angular 6中创建行和列，其中行和列可以有任意数量的行

我尝试使用动态HTML制作它，但我无法在动态HTML中调用click事件

这是我自己尝试的

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;
  }

---

您可以定义一个将生成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;
}

@组件({
选择器：“网格”，
模板：`
{{data}json}
`,
风格：[
“.row{背景色：红色；填充：5px；}”，
“.col{背景色：绿色；填充：5px；}”，
“.cell{背景色：青色；填充：5px；}”
]
})
导出类GridComponent{
@输入（）
资料：有；
}

您可以从应用程序/显示组件调用此网格组件，如下所示

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

这是一个好的开始，您可以修改默认的开关大小写以满足您的需要。我刚刚在json中找到了一个属性

hasRows

，如果是这样，它将再次递归调用网格组件

---

希望有帮助，Stackblitz供您参考：

不看代码，没有人能帮您解决问题。你可以放一个最小的工作演示，即使没有css，也可以专注于手头的问题，或者尝试stackblitz来重现problem@joyBlanks我更新了密码，请看一看，你能在stackblitz中创建这个吗？我只是想告诉你，人们已经努力了，所以我们不必像你在jQuery/javascript世界中创建的那样创建html模板，它是一个框架，而不是库或其他东西。您可以对同一组件进行组件递归调用，请尝试以下stackblitz链接：

@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>