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

Question

我进行了搜索，但没有找到任何有用的解决方案。正如其他人所说，\n、br、\r 或不起作用。我正在使用一个函数为日历上的每个日期调用工具提示，因为我必须循环遍历一组重复项。

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-template来实现内容的多行：

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)"

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

How to add a new line using ngbToolTip with attribute binding

angular

ng-bootstrap