如何在Angular的ngFor循环中融入mailto链接？

这问题我之前也碰到过！Angular出于安全考虑，默认会把插值绑定（{{ }}）里的HTML代码转义成纯文本，所以你直接写<a>标签才会显示成代码而不是实际链接。给你两个关键步骤就能解决：

1. 用DomSanitizer处理HTML内容 #

Angular提供了DomSanitizer服务，用来标记特定HTML内容为“安全可渲染”，避免XSS风险。你需要在组件中导入并使用它：

首先在组件代码中导入相关模块：

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

然后在组件类中处理你的finalResults数据，把包含HTML的value转换成安全的HTML对象：

export class YourComponent {
  displayedColumns = ['Key', 'Message'];
  finalResults: Array<{key: string, value: SafeHtml}> = [];

  constructor(private sanitizer: DomSanitizer) {
    // 模拟你的原始数据（如果是从后端获取，逻辑一样）
    const rawData = [
      {
        key: 'example@example.com',
        value: 'Please contact the <a href="mailto:name@mydomain.com">Login Team</a> for help.'
      }
    ];

    // 遍历数据，把每个item的value标记为安全HTML
    this.finalResults = rawData.map(item => ({
      key: item.key,
      value: this.sanitizer.bypassSecurityTrustHtml(item.value)
    }));
  }
}

2. 修改模板用[innerHTML]绑定 #

把原来的插值绑定{{ item.value }}换成属性绑定[innerHTML]，这样Angular就会渲染HTML内容而不是转义它：

<table>
  <tr>
    <th *ngFor="let col of displayedColumns"> {{ col }} </th>
  </tr>
  <tr *ngFor="let item of finalResults">
    <td>{{ item.key }}</td>
    <!-- 这里改用[innerHTML]绑定处理后的安全HTML -->
    <td [innerHTML]="item.value"></td>
  </tr>
</table>

这样处理后，表格里的Login Team就会变成可点击的mailto链接，点击后会唤起邮件客户端啦。

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