Question

我创建一个对象，并使用ngFor遍历对象并创建表。我想以某种方式合并mailto链接。

我有一个finalResults对象，看起来像这样：

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

消息类似

"Please contact the Login Team for help."

我想使Login Team成为mailto链接。

我已经尝试过这样的消息

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 Example

Answer 2

在组件中声明

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>

Answer 3

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

有什么方法可以将mailto链接与ngFor合并？

3 个答案: