如何将嵌套的 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 哪里有评论?

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 HTML 内部 innerHTML 属性外部 div:

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

innerDivHtml 定义为属性 getter:

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

如何将嵌套的 innerHtml 元素呈现为 innerHtml？

How to render nested innerHtml element into innerHtml?

html

javascript

innerhtml

angular