将api请求中的HTML字符串转换为HTML标签Angular

Question

我有一段很大的段落来自API请求。如下面的截图。

这些标签按原样显示。它不会转换为真正的HTML标签。

在Angular中，我只是使用一个简单的代码。

minister.component.html

<cdk-virtual-scroll-viewport itemSize="580" style="height:500px">
  <div *cdkVirtualFor="let data of allData">
    <a href="#{{data.Url_Page_Name}}">{{data.Minister_Name_English}}</a>
    <div>{{data.Ministry_Article}}</div>
  </div>
</cdk-virtual-scroll-viewport>

在浏览器中，我得到相同的html字符串格式标签。如何将html标签字符串更改为html标签。

minister.component.ts

    import { Component, OnInit } from '@angular/core';
import { ApiReadService } from "../apiReadService.service";

@Component({
  selector: 'app-ministers',
  templateUrl: './ministers.component.html',
  styleUrls: ['./ministers.component.scss']
})
export class MinistersComponent implements OnInit {

  allData:Object = [];

  constructor(private apiRead: ApiReadService) {

  }
  ngOnInit(){
  this.apiRead.getData().subscribe(data=>{
            this.allData  = data.allMinisters;
    }); 
  }
}

Answer 1

尝试在模板中使用[innerHtml]指令：

<cdk-virtual-scroll-viewport itemSize="580" style="height:500px">
  <div *cdkVirtualFor="let data of allData">
    <a href="#{{data.Url_Page_Name}}">{{data.Minister_Name_English}}</a>
    <div [innerHtml]="data.Ministry_Article"></div>
</div>