Невозможно динамически установить содержимое с новой строкой во всплывающем содержимом компонента начальной загрузки начальной загрузки

Question

Я пытаюсь использовать popover-компонент начальной загрузки, используя мою собственную строку, но с новой строкой.Я немного исследовал это и нашел решение для получения новых строк с помощью тега 'ng-template', но это не работает при попытке передать строку с разрывом (br или \ n).

Я пробовал много вещей, используя множество комбинаций innerHTML, строк внутри dom, пробелов: pre-line, json pipe.Ничто не похоже на работу.Лучшее, что я получил, было [Object HtmlDivElement] при использовании innerHTML в div вместо ng-шаблона.Как было сказано ранее, единственный способ для правильной работы - включить html в жестком коде в шаблон ng, а затем сослаться на этот шаблон ng в свойстве ngbPopover.Что не так с этим, так это то, что у меня нет жестко закодированного 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.всплывающая подсказка 'отображается во всплывающем окне

Answer 1

Решил это, разбив строку '\ n' на строковый массив, выполнив следующее:

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