使用[innerHtml]后追加文字

Question

使用Angular我创建了一个具有可重复下拉选项的表。我为选项创建了以下全局变量：

this.dropdown = `
  <option [ngValue]="1">1</option>
  <option [ngValue]="2">2</option>
  <option [ngValue]="3">3</option>
  <option [ngValue]="4">4</option>
`

我正在通过安全的HTML管道在HTML中使用此代码：

<td>
  <select [innerHtml]="dropdown | safeHTML"></select>
  Alert
</td>

我想通过使用以下进一步简化：

this.dropdown = `
  <select>
    <option [ngValue]="1">1</option>
    <option [ngValue]="2">2</option>
    <option [ngValue]="3">3</option>
    <option [ngValue]="4">4</option>
  </select>
`

以及

<td [innerHtml]="dropdown | safeHTML">
  Alert
</td>

使用此方法会导致缺少文本“ Alert”。

我该如何解决？

我创建了一个StackBlitz for this issue。

Answer 1

使用以下语法时，将同时以两种不同方式设置单元格内容。显然，绑定到innerHTML的值将覆盖元素的文字内容。

<td [innerHtml]="dropdown | safeHTML">
  Alert
</td>

您可以使用以下语法将文本附加到dropdown的值上：

<td [innerHtml]="dropdown + 'Alert' | safeHTML">
</td>

有关演示，请参见this stackblitz。