来自数据库的 ng-bootstrap 工具提示和 HTML 条目答案

【问题标题】：ng-bootstrap Tooltips & HTML Entries from a Database来自数据库的 ng-bootstrap 工具提示和 HTML 条目
【发布时间】：2020-09-09 06:38:05
【问题描述】：

我有一个问题，我可以在带有测试文本的 ng-bootstrap 工具提示的 ng-template 内容中获取标签、换行符、项目符号列表等内容，但是当从中间层和数据库中检索时，它不会以粗体呈现（在这种情况下）。例如：

                  <label [for]="q.value.question.id">{{q.value.question.questinontext}}
                    <ng-template #tipContent data-html="true">{{q.value.question.descriptiontext}} TEST TEST <b>TEST</b></ng-template>
                    <span class="fa fa-question-circle" placement="bottom" [ngbTooltip]="tipContent" tooltipClass="custom-tooltip" data-html="true"></span>
                    <span class="required" *ngIf="measureUtilities.questionIsRequired(null, measure, q.value.question)==1"> *</span>
                  </label>

尽管有 data-html="true" 并且知道它适用于硬编码文本，但仍会产生类似这样的内容。

有人对我可以尝试的事情或可能允许这样的事情的替代方案有任何想法吗？请参阅此处的 HTML 绑定部分（我从其他地方提取了 data-html 位）

https://ng-bootstrap.github.io/#/components/tooltip/examples

【问题讨论】：

标签： javascript html angular tooltip ng-bootstrap

【解决方案1】：

stackblitz from the examples 展示了如何在 tootli[ 中使用 HTML，它可以工作。查看您的代码，我只能说 data-html 属性不会影响工具提示行为。我没有看到任何其他问题。如果提供带有复制的stackblitz，我将能够提供更多帮助。

【讨论】：

【解决方案2】：

仅供那些遇到相同问题的人参考 - 您需要将其放在 ng-template 标记内的 div 标记中并指定 innerHTML：

            <label [for]="q.value.question.id">{{q.value.question.questinontext}}
              <ng-template #tipContent> <div [innerHTML]="q.value.question.descriptiontext"></div></ng-template>
              <span class="fa fa-question-circle" placement="bottom" [ngbTooltip]="tipContent"></span>
              <span class="required" *ngIf="q.value.question.isrequired==1"> *</span>
            </label>

【讨论】：