Angular Tooltip 无法识别 '\r' 或 '\n' 字符

Question

因此，概述用例：从我的后端服务中，我收到了一个对象列表，我使用 ngFor 拆分这些对象并使用 . 我在这张卡片上附加了一个工具提示以显示有关该项目的信息。每个项目的信息是一个元素列表。对于工具提示，我将列表发送到一个函数并使用 '\r\n' 字符连接列表的项目，但是工具提示根本不读取字符，只在工具提示中显示一个连续的字符串

<div *ngFor="let item of itemList; ">
 <mat-card matTooltip="{{getDesc(item)}}">
    <span class="card-title" style="font-size: 12px">
      {{ item.itemName }}
    </span>
 </mat-card>
</div>

toolTip 描述函数：

getDesc(item){
  let itemDesc: any;
  if(item.itemDescList !== null)
    itemDesc = item.itemDescList.join('\r\n')
  return itemDesc
}

如何在工具提示中引入这些换行符？

示例数组：['desc 1 : some text', 'desc 2: some text', ...] 这些需要在工具提示的新行中显示

Answer 1

这已经在这篇文章中得到了回答。

首先，创建一个将添加white-space: pre-line样式的类：

.line-broken-tooltip {
  white-space: pre-line;
}

然后使用matTooltipClass输入添加类。

要对其进行测试，您可以
在要拆分的部分之间添加一个换行分隔符 , ：

<mat-card    
    matTooltip="One line&#13;Two line"
    matTooltipClass="line-broken-tooltip">
</mat-card>

或者

this.tooltipText = 'One line
Two line';

<mat-card    
    [matTooltip]="tooltipText"
    matTooltipClass="line-broken-tooltip">
</mat-card>

并且要在不明确说明分隔符的情况下对其进行测试，请改用模板字符串，以便保留换行符：

this.tooltipText = `
  This value has been updated.
  Confidence: ${this.confidence}
`;

<p    
   [matTooltip]="tooltipText"
    matTooltipClass="line-broken-tooltip">
A02.0 - Salmonella enteritis 
</p>

Answer 2

您可以添加以下CSS

.mat-tooltip {
    white-space: pre-line;
}

.mat-tooltip {
    white-space: pre-line;
}

.with-pre-line
{
 white-space: pre-line;
 }