angular - ngb popover不呈现html编码

Question

我需要在 ngbPopover 中渲染一些文本，我可以做到。
这里的问题是我需要在文本之间换行。

我尝试使用 <br>、\n、\u000A 没有什么对我有用 <br> 按原样显示，对于 \n 和 \u000A 我看不到屏幕上的影响。

以下是我的参考代码。

html

<ng-template #subCoveragePopup>
   <div class="sub-coverage-tooltip">
      <div class="details">
        <div *ngFor="let subCov of getSubCoverageDescription(quoteCoverage.coverage)">
          <div class="title">{{subCov.code}}</div>
          <div class="">{{subCov.name}}</div>
        </div>
      </div>
   </div>
</ng-template>

在里面subCov.name我通过角度得到以下文本 - >

测试：这是第 1 行\u000A 这是第 2 行

或者

测试：这是行 \n 这是第 2 行

或者

测试：这是行 <BR> 这是第 2 行

使用所有三个选项，我无法显示换行符。有什么我想念的吗？

标签： angularng-bootstraphtml-encode

Answer 1

将 css 样式添加到相同的 div ：

<ng-template #subCoveragePopup>
   <div class="sub-coverage-tooltip">
      <div class="details">
        <div *ngFor="let subCov of getSubCoverageDescription(quoteCoverage.coverage)">
          <div class="title">{{subCov.code}}</div>
          <div class="splitLine">{{subCov.name}}</div>
        </div>
      </div>
   </div>
</ng-template>

.splitLine {
    style="white-space: pre;"
}