使用UI库呈现动态HTML
使用UI库呈现动态HTML
提问于 2022-09-28 03:31:02
我在角项目中使用UI库蚂蚁设计。我试图在内部呈现动态HTML，但使用UI库组件，如下所示
我的component.ts：
test : any;
ngAfterViewInit() {
setTimeout(() => {
this.test = this.domSanitizer.bypassSecurityTrustHtml('<nz-table>
<thead>
<td>Header 1</td>
<td>Header 2</td>
</thead>
<tbody>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</tbody>
</nz-table>')
}, 0);
}我的component.html：
<div [innerHtml]="test"></div>但这是我收到的
Header 1Header 2Value 1Value 2那么，如何在AntDesign的Nz组件中呈现动态HTML呢？
回答 1
Stack Overflow用户
发布于 2022-09-28 06:32:23
您不应该使用innerHTML，而应该使用*ngFor。您的代码示例非常糟糕，但我将尽我所能：
const tableData = {
headers: ["Header 1","Header 2"],
rows: [
["row 1 value1","row 1 value2"],
["row 2 value1","row 2 value2"],
["row 3 value1","row 3 value2"]
]
}在HTML模板中
<nz-table>
<thead>
<td *ngFor="let header of tableData.headers">{{header}}</td>
</thead>
<tbody>
<tr *ngFor="values of tableData.rows">
<td *ngFor="let value of values">{{value}}</td>
</tr>
</tbody>
</nz-table>正如您可以看到的那样，tableData可以是任何东西，您可以将行推入其中，表就会更新。您还可以从API或任何您想要的东西中获取值。您还可以使用JSON对象代替所有这些数组，如果需要的话也可以使用键值对。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73875927
复制相关文章
相似问题
腾讯云开发者
