ng-bootstrap 工具提示 & HTML 来自数据库的条目
ng-bootstrap Tooltips & HTML Entries from a Database
我有一个问题,我可以在带有测试文本的 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
stackblitz from the examples 展示了如何在 tootli[ 中使用 HTML 并且它有效。查看您的代码,我只能说 data-html
属性不会影响工具提示行为。我没有看到任何其他问题。如果提供带有复制的 stackblitz,我将能够提供更多帮助。
仅供 运行 遇到相同问题的人参考 - 您需要将其放在 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>
我有一个问题,我可以在带有测试文本的 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
stackblitz from the examples 展示了如何在 tootli[ 中使用 HTML 并且它有效。查看您的代码,我只能说 data-html
属性不会影响工具提示行为。我没有看到任何其他问题。如果提供带有复制的 stackblitz,我将能够提供更多帮助。
仅供 运行 遇到相同问题的人参考 - 您需要将其放在 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>