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

时间:2017-02-17 20:02:52

标签: html email angular typescript ngfor

在我的打字稿中,我有一个对象数组:

array: [
 {
   prop1: 'string1',
   prop2: this.createEmailLink('email@email.com'),
   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 =&#34; mailto:...&#34;)之外,一切正常。我在我的打样文件中创建了一个函数this.createEmailLink(email),它将电子邮件地址转换为字符串。

<a href="mailto:email@email.com">email@email.com</a>

但是,这个生成的字符串显示在上面,而不是渲染的html。

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

1 个答案:

答案 0 :(得分:2)

由于no-ff函数将HTML作为字符串返回,因此您需要绑定到createEmailLink属性,如前所述。这可以按如下方式完成:

innerHTML

Demo