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

Question

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

array: [
 {
   prop1: 'string1',
   prop2: this.createEmailLink('email@email.com'),
   prop3: 'string2'
 },
 {
   // next object
 }
]

我还有一个函数可以将其转换为仅值数组，因此我可以在元素中使用 *ngFor 并在其他页面上重用 table 代码。通过该函数后得到的数组是：

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:email@email.com">email@email.com</a>

但是，此生成的字符串显示如上所示，而不是渲染的 html。

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

Answer 1

由于 createEmailLink 函数 returns 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>

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

Angular 2 *ngFor Display clickable email address as part of table data

html

email

typescript

ngfor

angular

Demo