如何將嵌套的innerHtml元素呈現為innerHtml？

Question

我有一個div呈現HTML代碼貨幣：

<div [innerHtml]="item.Currency" title="" class="currTooltip"> <!-- This div 
                                            renders and show currency! -->  

    <div [innerHtml]="item.Currency" title="" class="tooltiptext"></div> <!-- This div
                                                          never rendered! -->   
</div>

item.Currency等於¥

在DOM可以看到什么：

但是，內部div永遠不會渲染。 我能做些什么，以使里面div那里有一個注釋<!-- This div never rendered! --> <!-- This div never rendered! -->嗎？

Answer 1

您嘗試同時以兩種不同的方式設置外部div的內容。 您包括一個內部div作為其內容，並且還指定其innerHTML屬性。 將僅使用這兩種方法中的一種（顯然是使用innerHTML設置的一種）。 您應該確定外部div是否包含內部div，或者其內容是否由innerHTML提供。

如果您想同時擁有這兩種方法，則可以使用以下方法之一：

方法1-包括兩個內部元素：

<div title="" class="currTooltip">
  <span [innerHTML]="item.Currency" ></span>
  <div [innerHtml]="item.Currency" title="" class="tooltiptext"></div>
</div>

方法2-在外部div的innerHTML屬性中包含整個內部div HTML：

<div [innerHTML]="item.Currency + innerDivHtml" title="" class="currTooltip">
</div>

將innerDivHtml定義為屬性獲取器：

get innerDivHtml(): string {
  return `<div title="" class="tooltiptext">${this.item.Currency}</div>`;
}