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

Question

我有 mat-table 类似于 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>

但是也失败了...

Answer 1

这是一个思考的方法。

使用 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}`;
}

这个returns一个字符串，它连接了行数据的title、state和date。

考虑拉取您想要在工具提示中包含的数据以及您要拉取的数据以填充您的 table。每次将鼠标悬停在带有工具提示的列上时进行 HTTP 调用可能会成为一个问题。

Answer 2

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

Answer 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 继续编码

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

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

tooltip

angular-material

angular