Angular 5：TypeScript格式化文本在*ngFor循环的显示及CSS生效问题

我来帮你搞定这个问题！核心原因有两个：一是Angular默认会转义HTML文本防止XSS攻击，直接用{{plan}}只会渲染纯文本；二是你的字符串里用的是HTML实体（比如<），不是真正的HTML标签，得先解码。

步骤1：解码HTML实体并处理安全校验 #

你的文本里用了<b>这类转义字符，得先把它们转换成真正的<b>标签，同时要告诉Angular这些HTML是安全的（避免安全拦截）：

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

@Component({
  selector: 'app-plan-selector',
  templateUrl: './plan-selector.component.html'
})
export class PlanSelectorComponent implements OnInit {
  planBundle: SafeHtml[] = [];
  planYearTextString = `One year payment <s>($59.88)</s> <b>$47.90</b> <span style="color: green;">(Save 20%)</span>`;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    // 解码HTML实体并标记为安全HTML
    const decodedYearPlan = this.decodeHtml(this.planYearTextString);
    this.planBundle = [
      'One month ($4.99)',
      this.sanitizer.bypassSecurityTrustHtml(decodedYearPlan)
    ];
  }

  private decodeHtml(html: string): string {
    // 用textarea解码HTML实体，简单可靠
    const textArea = document.createElement('textarea');
    textArea.innerHTML = html;
    return textArea.value;
  }
}

步骤2：在模板中使用[innerHTML]绑定HTML #

不能再用{{plan}}文本绑定了，要改用[innerHTML]让Angular解析HTML内容。修改你的模板：

<div>
  <mat-radio-group layout="vertical" [(ngModel)]="selectedPlan">
    <mat-radio-button *ngFor="let plan of planBundle" [value]="plan" style="display: block; margin-top: 8px;">
      <span [innerHTML]="plan"></span>
    </mat-radio-button>
  </mat-radio-group>
</div>

为什么之前的方法失败？ #

• 用{{plan}}：Angular会把所有HTML标签转义成纯文本，所以你看到的是<b>This</b>而不是加粗的文字。
• 直接用DOMParser得到[object HTMLDocument]：因为parseFromString返回的是整个文档对象，你需要取document.body.innerHTML才能拿到解析后的HTML内容，而不是直接输出对象。

安全提醒 #

如果这些HTML内容是用户输入的不可信内容，一定要先过滤危险标签和脚本，再使用bypassSecurityTrustHtml，避免XSS攻击。如果是固定的业务文本，就不用担心这个问题。

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