如何在鼠标悬停时加载数据并将其显示为工具提示 - Angular答案

【问题标题】：How to load data and show them as tooltip on mouseover - Angular如何在鼠标悬停时加载数据并将其显示为工具提示 - Angular
【发布时间】：2020-04-23 23:26:48
【问题描述】：

我有类似于https://stackblitz.com/angular/bvydnkvdddm 的垫表。我想为“#”列中的每条记录添加工具提示。在mouseover 我想根据特定数字从数据库中加载数据并在工具提示中显示它们。

<ng-container matColumnDef="number">
    <th mat-header-cell *matHeaderCellDef>#</th>
    <td mat-cell matTooltip={{dataFromService}} *matCellDef="let row">{{ row.number }}</td>
</ng-container>

如果我添加 onmouseover="getData()" 它会失败。我收到消息说函数getData() 是undefined，即使这个方法存在于.ts 文件中。第二个问题是如何传递特定 mat-cell 元素的值？我试图做这样的事情：

<ng-container matColumnDef="number">
    <th mat-header-cell *matHeaderCellDef>#</th>
    <td mat-cell onmouseover="getData(row.number)" matTooltip={{dataFromService}} *matCellDef="let row">{{ row.number }}</td>
</ng-container>

但它也失败了……

【问题讨论】：

标签： angular tooltip angular-material

【解决方案1】：

对mouseover 使用事件绑定，从服务中获取数据并将其分配给*.ts 中的变量，您可以使用该变量在模板中设置matTooltip 属性的值。

你的模板应该是：

<ng-container matColumnDef="number">
  <th mat-header-cell *matHeaderCellDef>#</th>
  <td mat-cell (mouseover)="getData(row.number)" 
    matTooltip={{dataFromService}} 
    *matCellDef="let row">{{ row.number }}</td>
</ng-container>

在您的*.ts 文件中：

dataFromService = '';
getData(rowNum){
 // use your service to get the data using the rowNum 
 // and assign the value you want, example 'data' to dataFromService variable
 this.dataFromService = data;
}

不建议为每个 mouseover 事件请求服务，因为处理用户不断将鼠标从一个行号移动到另一个行号这样的情况变得复杂 - 这会触发具有更新行号的多个事件，并且您的服务器请求可能无法在该时间范围内完成。

【讨论】：

【解决方案2】：

这是一种可以考虑的方法。

使用matTooltip，如下所示。

<!-- Number Column -->
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef>#</th>
<td mat-cell *matCellDef="let row" [matTooltip]="getToolTipData(row.number)">{{ row.number }}</td>
</ng-container>

方括号允许您绑定到getToolTipData 函数的结果。在这里，您正在为当前行传递row.number。

getToolTipData 函数可以做这样的事情：

getToolTipData(issueId: string): string {
    const issue = this.data.find(i => i.number === issueId);
    return `Title: ${issue.title} ||
        State: ${issue.state} ||
        Date: ${issue.created_at}`;
}

这将返回一个字符串，该字符串连接行数据的title、state 和date。

考虑将您希望在工具提示中包含的数据与您要拉入表格的数据一起提取。每次将鼠标悬停在带有工具提示的列上时都进行 HTTP 调用可能会成为问题。

【讨论】：

我只想在鼠标悬停时加载数据，并且只针对特定值。在您的示例中，即使鼠标不在元素上，我也会加载所有数据。

【解决方案3】：

嗯，我的客户项目遇到了同样的问题。但我也想在数据之间添加断线。所以这是如何完成的。点击here进行演示

在你的html文件中添加这段代码

<img src="assets/icons/about.png" alt="borderLineHigh" width="15px" height="15px" matTooltip="{{getMoreInformation()}}"  matTooltipClass="test">

在ts文件中

 getMoreInformation(): string {
     return 'Address : Home \n  Tel : Number';// \n represent break line here
 }

在你的 style.css 文件中（记住项目 style.css）

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

希望它对某人有所帮助。 ps继续编码

【讨论】：