Question

我的mat-table与https://stackblitz.com/angular/bvydnkvdddm类似。我想在列＃＆＃39;中添加每个记录的工具提示。在鼠标悬停时，我想根据具体的数字从数据库加载数据，并在工具提示中显示它们。

<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（）未定义的消息，即使这个方法存在于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

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

建议不要为每个鼠标悬停事件提供服务请求，因为处理诸如用户继续将鼠标从一个行号移动到另一个行的情况变得复杂，这会引发具有更新行号的多个事件，并且您的服务器请求可能不是在那段时间内完成。

Answer 2

这是一种思考方法。

使用Microsoft.SharePoint.Client.Folder，如下所示。

Microsoft.SharePoint.Client.DocumentSet

方括号允许您绑定matTooltip函数的结果。在这里，您将传递当前行的 <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

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

考虑在工具提示中提取您想要的数据以及要填充表格的数据。每次将鼠标悬停在带有工具提示的列上时，都可能会出现问题。

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

3 个答案: