Есть ли способ, которым я могу включить mailto ссылки с ngFor?

Question

Я создаю объект и использую ngFor, чтобы пройти через него и создать таблицу.Я хотел бы как-то включить ссылки mailto, если это возможно.

У меня есть finalResults объект, который выглядит примерно так:

[
{key: 'example@example.com', value: 'message'}
]

Где сообщение что-то вроде

"Please contact the Login Team for help."

Я бы хотел сделать команду входа в систему ссылкой на почту.

Я уже пытался создать сообщение, подобное этому

Please contact the <A HREF="mailto:name@mydomain.com">Login Team</A> for help.

Но на веб-странице оно просто отображало это точно.Там не было никакой ссылки.

Я использую ngFor, чтобы пройтись по моему объекту и составить таблицу.

< <tr>
        <th *ngFor="let col of displayedColumns">
          {{ col }}
        </th>
      </tr>
      <tr *ngFor="let item of finalResults">
        <td>{{ item.key }}</td>
        <td>{{ item.value }}</td>
      </tr>

      <tr></tr>
    </table>

Есть ли способ сделать это?

Answer 1

Если вы хотите сохранить свой текст в формате html, попробуйте использовать innerHTML привязка:

ts

finalResults = [
  { 
     key: 'example@example.com',
     value: 'Please contact the <A HREF="mailto:name@mydomain.com">Login Team</A> for help.' 
  }
];

html

<td [innerHTML]="item.value"></td>

Ng-run Пример

Answer 2

<tr *ngFor="let item of finalResults">
    <td><a href="mailto:'item.key'">{{ item.value }}</a></td>
</tr>

Answer 3

В компоненте объявите

email: string = 'mailto:misesasd@gmail.com'

в шаблоне:

<a [href]="email">misesasd@gmail.com</a>

массив:

      <tr *ngFor="let item of finalResults">
        <td><a [href]="item.key">{{item.key}}</a></td>
        <td>{{ item.value }}</td>
      </tr>

или:

<tr *ngFor="let item of finalResults">
            <td><a href="{{item.key}}">{{item.key}}</a></td>
            <td>{{ item.value }}</td>
          </tr>