在 angular 我的网页中将响应中的 <a> 显示为 HYPERLINK

Question

我正在处理一个 angular 项目。我在 api 的响应中得到一个 link，如下所示，我在 html.

中对其进行迭代

<a class="test" href="https://www.google.com/" target="_blank">click here</a>

我想在我的输出中显示作为 hyperlink 响应的 href，它应该导航到适当的 link.
它在输出中显示为纯文本。

我已经在 stackblitz 中更新了我的代码。
工作 stackblitz：

https://stackblitz.com/edit/angular-ivy-qxfftw?file=src%2Fapp%2Fapp.component.ts

来自api的回复：

  apiresponse: any = {
    message: 'message',
    response: [
      {
        hrefmessages:
          'i need this link to be shown as hyperlink <a class="test" href="https://www.google.com/" target="_blank">click here</a>. ',
        icons: [
          {
            icon1: 'hello',
            name: 'hello',
            age: 'hello',
          },
        ],
      },
      {
        hrefmessages: 'This is also a href test message',
        icons: [
          {
            icon1: 'test',
            name: 'test',
            age: 'test',
          },
        ],
      },
    ],
  };

Answer 1

您需要设置要将响应中的 HTML 绑定到的标签的内部 HTML。示例：

<div [innerHTML]="response[0].hrefmessages"></div>

StackBlitz：https://stackblitz.com/edit/angular-ivy-8ydusb?file=src/app/app.component.html

在 angular 我的网页中将响应中的 <a> 显示为 HYPERLINK

Display the <a> from response as HYPERLINK in my web page in angular

forms

arrays

hyperlink

typescript

angular