Angular动态表格创建异常：HTML标签被原样输出无法生成表格

问题原因 #

Angular的插值表达式{{}}会自动转义HTML内容，导致你拼接的表格标签被当作纯文本显示，无法渲染成实际的表格。

解决步骤 #

1. 替换插值为[innerHTML]绑定

修改HTML模板，将{{table}}替换为[innerHTML]属性绑定，让Angular解析并渲染HTML字符串：

<div class="container" id="tabla" [innerHTML]="table"></div>

2. 完善行列数输入与表格生成逻辑

为实现用户输入行列数的需求，添加输入框和生成按钮，并修改TypeScript代码支持行列参数：

HTML模板：

<div class="input-group">
  <label>行数：</label>
  <input type="number" [(ngModel)]="rowCount" min="1" placeholder="请输入行数">
  
  <label>列数：</label>
  <input type="number" [(ngModel)]="colCount" min="1" placeholder="请输入列数">
  
  <button (click)="generateTable()">生成表格</button>
</div>

<div class="container" id="tabla" [innerHTML]="table"></div>

TypeScript代码：

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

@Component({
  selector: 'app-table-maker',
  templateUrl: './table-maker.component.html',
  styleUrls: ['./table-maker.component.css']
})
export class TableMakerComponent implements OnInit {
  table: SafeHtml = '';
  rowCount: number = 10;
  colCount: number = 1;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    this.generateTable();
  }

  generateTable() {
    let tableHtml = '<table border="1">'; // 添加边框方便查看效果

    // 生成行
    for (let i = 0; i < this.rowCount; i++) {
      tableHtml += '<tr>';
      // 生成每行的列
      for (let j = 0; j < this.colCount; j++) {
        tableHtml += `<td>行${i+1}列${j+1}</td>`;
      }
      tableHtml += '</tr>';
    }

    tableHtml += '</table>';
    // 标记HTML为安全内容，避免Angular的安全拦截
    this.table = this.sanitizer.bypassSecurityTrustHtml(tableHtml);
  }
}

3. 导入FormsModule（必要步骤）

因为使用了[(ngModel)]双向绑定，需要在所属模块（如AppModule）中导入FormsModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 导入FormsModule

import { AppComponent } from './app.component';
import { TableMakerComponent } from './table-maker/table-maker.component';

@NgModule({
  declarations: [
    AppComponent,
    TableMakerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // 添加到imports数组
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

关键说明 #

• [innerHTML]：让Angular将字符串解析为HTML并渲染，而非转义成纯文本。
• DomSanitizer：Angular默认会拦截动态HTML以防止XSS攻击，通过bypassSecurityTrustHtml可以标记可信的HTML内容。

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