Angular+TypeScript循环绑定innerHTML时无法获取字段值如何解决

按优先级从高到低排查以下问题即可解决：

• 优先检查自定义StyleHtml管道实现
  Angular默认会对所有绑定到innerHtml的内容做安全消毒，未经信任的HTML内容、内联样式/脚本会被直接拦截清空，这是90%同类问题的诱因。正确的安全信任管道写法如下：

  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  @Pipe({ name: 'StyleHtml' })
  export class StyleHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
    transform(value: string): SafeHtml {
      // 仅当NotificationText内容完全可信、不存在用户提交的不可控内容时使用，避免XSS风险
      return this.sanitizer.bypassSecurityTrustHtml(value);
    }
  }
  

  写完记得确认管道已经在对应模块的declarations数组里声明，否则管道不生效也会导致渲染异常。
• 核对字段名与数据结构
  接口返回的字段名大小写、嵌套层级很容易和代码写法不匹配，比如接口返回小驼峰notificationText，代码写大驼峰NotificationText时会取到undefined，自然没有内容。可以临时在模板里加JSON打印调试，确认字段值真实存在：

  <li *ngFor="let n of NotificationData">
    <!-- 临时调试：打印当前循环项的完整结构，确认字段名、字段值正确 -->
    <pre>{{ n | json }}</pre>
    {{n.NotificationID}} <label [innerHtml]="n.NotificationText | StyleHtml"></label>
  </li>
  

• 排查异步赋值时序问题
  如果NotificationData是接口异步请求返回的，要确认请求成功回调里正确把返回的列表赋值给了NotificationData变量，不要出现赋值层级错误（比如把整个HTTP响应对象赋值给变量，而不是响应体里的列表字段）、变量作用域错误导致赋值不生效的问题。
• 排查DOM渲染与样式问题
  打开浏览器开发者工具，定位到对应的<label>元素：
  • 如果DOM里根本没有插入HTML内容，回到前面三个点排查
  • 如果DOM里已经有内容但是页面看不见，检查是否有全局CSS给label设置了display: none、visibility: hidden、font-size: 0、颜色和背景一致等样式导致内容被隐藏。

安全提示：bypassSecurityTrustHtml会完全关闭Angular对这段HTML的XSS防护，禁止用于渲染用户可提交、未经过滤的不可信内容，避免站点遭遇XSS攻击。

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