如何使用具有属性绑定的ngbToolTip添加新行

Question

我已经搜索过了，但没有发现任何有用的解决方案。正如其他人所说，\n、br、\r或&013不起作用。我正在使用一个函数为日历上的每个日期调用工具提示，因为我必须循环遍历一系列重复。

ts文件

getToolTip(x: Date) {
let retR = [];
let d3 = x.getDay();
let dt2 = this.recurrances.filter(e =>
(e.recurrances == 2 && d3 == 1) ||
(e.recurrances == 3 && d3 == 2) ||
(e.recurrances == 4 && d3 == 3) ||
(e.recurrances == 5 && d3 == 4) ||
(e.recurrances == 6 && d3 == 5));
dt2.forEach(e=> retR.push(e));
let ret = ""
retR.forEach(e=> {
ret = "Company: " + e.company + "n" +"Description: " + e.description;

});
return ret;
}

html

<ng-container *ngIf="entries.length > 0 || appointments.length > 0 || recurrances.length > 0">
<tr *ngFor="let w of allDates">
<td class='days'  (click)="showTimeEntries(d)" *ngFor="let d of w">
<span class="top-left">{{d.getDate()}}</span>
<h4>{{getHours(d)}}</h4>
<h5 [ngbTooltip]="getToolTip(d)" [openDelay]="400">{{ getAppointments(d) }}</h5>
</td>
</tr>
</ng-container>

Answer 1

您可以使用ng模板来实现多行内容：

https://stackblitz.com/edit/angular-whu8aq?file=src/app/tooltip-tplcontent.html

<ng-template #tipContent>
tooltip <br>
mulitple <br>
lines!
</ng-template>
<button type="button" class="btn btn-outline-secondary" [ngbTooltip]="tipContent">
Check tooltip
</button>

顺便说一句，你应该避免使用像这样的函数绑定

[ngbTooltip]="getToolTip(d)"