Угловые 2 * ngFor Дисплей интерактивного адрес электронной почты, как часть данных таблицы

Question

В моей машинописи У меня есть массив объектов:

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

У меня также есть функция, которая превращает это в значение только массив, так что я могу используйте * ngFor в элементе и повторно используйте код таблицы на других страницах. После прохождения этой функции результирующий массив:

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

Мой HTML-код создает строки и столбцы в качестве нг-контейнера:

<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 (электронная почта) в моем файле машинописного текста, который преобразует адрес электронной почты в строку.

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

Однако эта сгенерированная строка отображается, как она отображается выше, а не как отображаемый html.

Я искал здесь и видел похожие случаи, которые включают innerHtml, но мне еще предстоит найти ответ на мой вопрос. Заранее спасибо.

Answer 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