Angular 2 *ngFor 将可点击的电子邮件地址显示为表格数据的一部分

Posted 2023-03-13

【中文标题】Angular 2 *ngFor 将可点击的电子邮件地址显示为表格数据的一部分

【英文标题】：Angular 2 *ngFor Display clickable email address as part of table data

【发布时间】：2017-07-07 11:34:07

【问题描述】：

在我的打字稿中，我有一个对象数组：

array: [
 
   prop1: 'string1',
   prop2: this.createEmailLink('[e-mail]'),
   prop3: 'string2'
 ,
 
   // next object
 
]

我还有一个函数可以把它变成一个只有值的数组，所以我可以在元素中使用 *ngFor 并在其他页面上重用表格代码。通过该函数后，结果数组为：

array: [
  ['string1', 'emailaddress', string2'], 
  [//next object]
]

我的 html 代码在 ng-container 中创建行和列：

<ng-container *ngFor="let row of array>
 <tr class="some-class">
    <td *ngFor="let column of row">column</td>
 </tr>
</ng-container>

这一切都很好，除了我需要可点击的电子邮件地址（href="mailto:..."）。我在我的打字稿文件中创建了一个函数 this.createEmailLink(email)，它将电子邮件地址转换为字符串。

<a href="mailto:[e-mail]">[e-mail]</a>

但是，这个生成的字符串显示为如上所示，而不是呈现为 html。

我在这里搜索并看到了涉及 innerHtml 的类似案例，但我还没有找到我的问题的答案。提前致谢。

【参考方案1】：

由于createEmailLink 函数将HTML 作为字符串返回，因此您需要绑定到innerHTML 属性，正如您之前阅读的那样。这可以按如下方式完成：

<ng-container *ngFor="let row of array>
 <tr class="some-class">
    <td *ngFor="let column of row">
        <div [innerHTML]="column"></div>
    </td>
 </tr>
</ng-container>

Demo

【讨论】：

非常感谢！这正是我需要的解释。非常感谢演示。