是否可以在 InnerHTML 中进行插值

Question

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

我尝试过像这样使用innerHTML：

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

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

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

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

Answer 1

不...您可以使用 ng-switch。那是有角度的方式......特别是如果你使用AOT。否则，您将需要 JIT 才能动态编译模板。

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