是否可以在 InnerHTML 中进行插值

Question

我有一个 mat-table 循环遍历对象数组并动态呈现数据：<span> {{column[element]}}</span>。我希望其中一个单元格是 link 而不是其他单元格。

我试过像这样使用 innerHTML：

<span innerHTML="(element === 'books') ? '<a>column[element]</a>' : column[element]"></span>

它能够正确识别 else 语句（:column[element]）之后的动态数据，它可以识别 A 标签，但它不会像我想要的那样呈现 <a></a> 之间的数据；而是将其读取为字符串。并打印出“column[element]”而不是我希望它打印出书籍并使每本书成为该特定书籍的link。

我尝试了这种方法，结果相同：

<span innerHTML="(element === 'books') ? '<a>{{column[element]}}</a>' : column[element]"></span>

Answer 1

不...您可以使用 ng-switch。这就是 angular 方式...尤其是如果您使用 AOT。否则，您将需要 JIT 才能动态编译模板。

<span [ngSwitch]="element">
  <a *ngSwitchCase="'books'">{{column[element]}}</a>
  <ng-container *ngSwitchDefault>
    {{column[element]}}
  </ng-container>
</span>

是否可以在 InnerHTML 中进行插值

is it possible to have Interpolation within InnerHTML

interpolation

innerhtml

angular