Question

我正在尝试使用我自己的自定义字符串来利用bootstrap的popover组件，但其中要包含新行。我对此进行了相当多的研究，找到了使用'ng-template'标记获取新行的解决方案，但在尝试使用带有break的字符串（br或\ n）传递字符串时，此方法不起作用。

我已经尝试过使用innerHTML，dom中的字符串，空格（前行，json管道）的许多组合来做很多事情。似乎没有任何作用。当在div而不是ng模板上使用innerHTML时，我得到的最好的结果是[Object HtmlDivElement]。如前所述，唯一可行的方法是在ng-template中包含硬编码的html，然后在ngbPopover属性中引用该ng-template。这有什么问题，我没有硬编码的HTML，只有一个传入的字符串（带有HTML标记）。

<ng-template #popContent style="white-space: pre-line;">{{controlModel.tooltip}}</ng-template>
            <div *ngIf="controlModel.tooltip" style="display:inline; white-space: pre-line;" [ngbPopover]="popContent"
                 popoverTitle="Tip" triggers="mouseenter:mouseleave"
                 placement="right"
                 container="body">
                <i class="icon-info"></i>
            </div>

预期结果是弹出框内容中显示了字符串'controlModel.tooltip'中包含的新中断

Answer 1

通过将“ \ n”字符串拆分为字符串数组来解决此问题，方法如下：

<ng-template #popContent>
                <ng-container *ngFor="let splitString of tooltipSplit">
                    {{splitString}}<br />
                </ng-container>
            </ng-template>

无法在bootstraps popover组件的弹出内容中用新行动态设置内容

1 个答案: