有没有办法可以将 mailto 链接与 ngFor 合并？

Question

我创建一个对象并使用 ngFor 循环它并创建一个 table。如果可能的话，我想以某种方式合并 mailto links。

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

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

消息类似于

"Please contact the Login Team for help."

我想让 Login Team 成为一个邮箱 link。

我已经试过这样发消息了

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

但在网页上它只是准确地显示了这一点。没有link。

我使用 ngFor 遍历我的对象并生成 table。

< <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 合并？

Is there a way I can incorporate mailto links with ngFor?

html

angular

ngfor

mailto