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

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

0 голосов
/ 28 июня 2019

Я создаю объект и использую 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>

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

Ответы [ 3 ]

1 голос
/ 28 июня 2019

Если вы хотите сохранить свой текст в формате 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 Пример

0 голосов
/ 28 июня 2019 
<tr *ngFor="let item of finalResults">
    <td><a href="mailto:'item.key'">{{ item.value }}</a></td>
</tr>
0 голосов
/ 28 июня 2019

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

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>
...