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

How to load data and show them as tooltip on mouseover - Angular

我有类似于https://stackblitz.com/angular/bvydnkvdddm的垫子表。我想为列"#"中的每条记录添加工具提示。在mouseover上，我要基于特定编号从数据库加载数据并在工具提示中显示它们。

1
2
3
4

<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文件中。第二个问题是如何传递特定单元格元素的值？我试图做这样的事情：

1
2
3
4

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

但是它也失败了...

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

您的模板应为：

1
2
3
4
5
6

<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文件中：

1
2
3
4
5
6

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事件发出服务请求，因为它会处理复杂的情况，例如用户不断将鼠标从一个行号移动到另一个行号-这会触发具有更新的行号的多个事件，并且您的服务器请求可能无法在该时间范围内完成。

这是一种思考的方法。

使用matTooltip，如下所示。

1
2
3
4
5

<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函数可以执行以下操作：

1
2
3
4
5
6

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调用。