Question

在我的app.component.ts我有一个数组，其中定义了文本和html格式：

this.testStrings = [
  '<b>title 1</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
  '<b>title 2</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
  '<b>title 3</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
  '<b>title 4</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
  '<b>title 5</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>',
  '<b>title 6</b> Title Hier <FONT color="blue"><i>some texts hier.</i></FONT>'];

我想使用*ngFor和[innerHtml]来显示上述所有项目。

我尝试了很多方法，例如：

<label *ngFor="let testString of testStrings" [innerHtml]="{{ testStrings }}"></label>

但它们都不起作用。： - （

因此我问是否有人可以帮助我？非常感谢！

Answer 1

<ng-container *ngFor="let testString of testStrings">
  <label [innerHtml]="testString"></label>
</ng-container>

Answer 2

您不应该使用带有属性绑定的插值。请尝试以下语法：

<label *ngFor="let testString of testStrings" [innerHTML]="testString"></label>

如何一起使用ngFor和innerHtml？

2 个答案: