我有一个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! -->
?
最佳答案
您尝试同时以两种不同的方式设置外部 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 包含在外部 div 的 innerHTML
属性内:
<div [innerHTML]="item.Currency + innerDivHtml" title="" class="currTooltip">
</div>
将 innerDivHtml
定义为属性 getter:
get innerDivHtml(): string {
return `<div title="" class="tooltiptext">${this.item.Currency}</div>`;
}
关于javascript - 如何将嵌套的innerHtml元素渲染到innerHtml中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48667876/