在Angular中如何将JSON字符串转为带项目符号的HTML文本？

一、实现文本拆分渲染成段落+列表 #

完全可以实现，你可以在组件里先对JSON中的字符串做拆分处理，再在模板里渲染对应的结构：

1. 组件逻辑处理 #

假设你的JSON数据已导入组件，示例代码如下：

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

@Component({
  selector: 'app-message-display',
  templateUrl: './message-display.component.html'
})
export class MessageDisplayComponent {
  messageData = {
    "messageToDisplay": "this is a long message with 1) first bullet point 2) second bullet point"
  };

  // 提取段落文本
  get mainText(): string {
    return this.messageData.messageToDisplay.split(' with ')[0];
  }

  // 提取并整理列表项
  get listItems(): string[] {
    const listPart = this.messageData.messageToDisplay.split(' with ')[1];
    // 按数字+）分割，过滤空内容并去除多余空格
    return listPart?.split(/\d+\)/).filter(item => item.trim()).map(item => item.trim()) || [];
  }
}

2. 模板渲染 #

在组件HTML模板中直接渲染处理后的内容：

<div>
  <p>{{ mainText }}</p>
  <ul *ngIf="listItems.length > 0">
    <li *ngFor="let item of listItems">{{ item }}</li>
  </ul>
</div>

二、能否在JSON字符串中添加HTML标签？ #

可以，但需注意Angular的安全防护机制：

• 默认情况下，Angular会转义HTML标签，直接用{{ }}插值绑定会把标签当成普通文本显示。
• 若要渲染JSON中的HTML，需使用[innerHTML]绑定，同时如果内容来源可信，可通过DomSanitizer标记为安全内容：

示例： #

1. 组件中处理安全内容：

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

@Component({
  selector: 'app-html-message',
  templateUrl: './html-message.component.html'
})
export class HtmlMessageComponent {
  messageWithHtml = {
    "messageToDisplay": "<p>This is a long message</p><ul><li>first bullet point</li><li>second bullet point</li></ul>"
  };

  safeHtmlContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    this.safeHtmlContent = this.sanitizer.bypassSecurityTrustHtml(this.messageWithHtml.messageToDisplay);
  }
}

2. 模板中渲染：

<div [innerHTML]="safeHtmlContent"></div>

⚠️ 注意：仅当你完全信任JSON内容来源时才使用此方法，避免XSS攻击风险。

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