Angular中[innerHtml]渲染表格丢失<tr><td>标签的问题及解决

问题场景 #

我通过[innerHtml]渲染表格tbody内容，编写了生成HTML字符串的函数，控制台输出的HTML结构完全正确，但页面仅显示数据文本，<tr>和<td>标签未被正确解析——DOM中tbody的第一个子节点是文本形式的数据，仅部分<tr>元素正常显示。

相关代码 #

组件中的渲染函数

renderTableBody() {
    let htmlString = '';

    this.dataContent.forEach((row: any) => {
        htmlString += '<tr>';
        this.dataTableConfig.forEach((item: any) => {
            var x = item.field;
            htmlString += `<td>${row[item.field]}</td>`;
        });

        htmlString += '</tr>';
    });

    console.log(htmlString);
    return htmlString;
}

模板代码

<table class="table datatable-basic table-bordered table-striped">
    <thead class="bg-primary text-white">
        <tr>
            <th *ngFor="let item of dataTableConfig">{{ item.header }}</th>
        </tr>
    </thead>
    <tbody [innerHTML]="renderTableBody()"></tbody>
</table>

问题原因 #

1. Angular安全过滤：默认情况下，Angular的DomSanitizer会对未标记为安全的HTML内容进行过滤处理，即便控制台输出的字符串结构正确，实际插入DOM时表格标签可能被误判为不安全内容而剥离。
2. 浏览器HTML解析规则：<tbody>的直接子元素只能是<tr>，如果生成的HTML字符串中存在隐形字符、格式异常等情况，浏览器会将不符合规则的内容提取为文本节点，导致<tr>/<td>无法正常渲染。

解决方法 #

方案一：标记HTML为安全内容（临时适配）

通过DomSanitizer将生成的HTML字符串标记为安全的SafeHtml，避免被Angular过滤：

1. 在组件中注入DomSanitizer：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

2. 修改渲染函数返回安全HTML：

renderTableBody(): SafeHtml {
    let htmlString = '';

    this.dataContent.forEach((row: any) => {
        htmlString += '<tr>';
        this.dataTableConfig.forEach((item: any) => {
            htmlString += `<td>${row[item.field]}</td>`;
        });
        htmlString += '</tr>';
    });

    return this.sanitizer.bypassSecurityTrustHtml(htmlString);
}

方案二：使用Angular模板语法渲染（推荐最佳实践）

完全舍弃innerHtml，直接用Angular的*ngFor指令在模板中循环渲染，这是Angular官方推荐的方式，既安全又易维护，还能彻底避免浏览器解析问题：

修改后的模板代码：

<table class="table datatable-basic table-bordered table-striped">
    <thead class="bg-primary text-white">
        <tr>
            <th *ngFor="let item of dataTableConfig">{{ item.header }}</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of dataContent">
            <td *ngFor="let item of dataTableConfig">{{ row[item.field] }}</td>
        </tr>
    </tbody>
</table>

这种方式无需额外编写渲染函数，直接通过模板指令完成数据绑定，完全符合Angular的组件化开发思路。

内容的提问来源于stack exchange，提问作者liz