如何在Angular中结合使用ngFor与innerHtml？

嘿，这个需求在Angular开发里太常见了，我来给你一步步讲清楚怎么实现：

1. 确认组件中的数组定义 #

你已经在app.component.ts里定义好了包含转义HTML的数组，这部分没问题，我把完整的组件代码贴出来方便参考：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 你定义的带转义HTML的数组
  testStrings = [
    '<b>title 1</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
    '<b>title 2</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
    '<b>title 3</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
    '<b>title 4</b> Title Hier...'
  ];
}

2. 在模板中结合*ngFor和[innerHTML] #

这是实现的核心步骤，在app.component.html里，我们用*ngFor遍历数组，然后通过[innerHTML]指令把每个元素里的转义HTML解析成实际的页面元素：

<!-- app.component.html -->
<!-- 用*ngFor循环遍历testStrings数组 -->
<div *ngFor="let content of testStrings" class="content-item">
  <!-- 用[innerHTML]绑定内容，自动解析转义的HTML -->
  <div [innerHTML]="content"></div>
</div>

这样渲染后，你会看到每个数组项里的<b>标签会变成加粗文字，蓝色斜体的文本也会正确显示——因为[innerHTML]会自动把<这类HTML实体转换成对应的标签。

3. 安全注意事项（可选） #

如果你的数组内容是自己硬编码的可信内容，上面的代码就足够了。但如果内容来自用户输入或者其他不可信来源，直接用[innerHTML]可能存在XSS风险，这时候需要用Angular的DomSanitizer把内容标记为安全：

首先修改组件代码，注入DomSanitizer并处理数组：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  testStrings = [
    '<b>title 1</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
    '<b>title 2</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
    '<b>title 3</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
    '<b>title 4</b> Title Hier...'
  ];
  safeContentList: SafeHtml[] = [];

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 把每个字符串标记为安全的HTML
    this.safeContentList = this.testStrings.map(item => 
      this.sanitizer.bypassSecurityTrustHtml(item)
    );
  }
}

然后模板里改成绑定处理后的安全数组：

<div *ngFor="let content of safeContentList" class="content-item">
  <div [innerHTML]="content"></div>
</div>

这样就能在保证安全的前提下渲染HTML内容啦～

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