![](/img/trans.png)
[英]How can I create an html table, with unknown number of columns per row, get the columns to be aligned, and have an id for each cell/row?
[英]I need to make rows and columns in angular 6 using recursion in which row can columns and columns have any numbers of row
我嘗試使用動態 HTML 制作它,但我無法在動態 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;
}
我的.html文件
<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"
}
]
}
]
}
您可以定義一個組件來生成您的 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
,您可以修改默認開關盒以滿足您的需求
希望對您有所幫助,Stackblitz 供您參考: https://stackblitz.com/edit/angular-6cqbsg
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.