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>

是否可以在InnerHTML中进行插值

1 个答案: