在angular8中进入动态列/行mat-table的单元格后如何获取每个单元格数据？

Question

我想为 mat-table 的每个单元格添加工具提示和验证。 因此，一旦用户将数据输入到单元格中，就必须显示该单元格数据的工具提示。 工具提示文本将是 [column-name and data] 的组合。 鼠标悬停/输入后如何获取列名和数据？

动态表的html代码是这样的——

<div  class="row" *ngIf="displayedColumns.length > 0" class="mat-elevation-z8">
    <div class="table-container">
    <table class="table"  mat-table [dataSource]="dataSource">

        <tr mat-header-row *cdkHeaderRowDef="displayedColumns; sticky:true" ></tr>
        <tr mat-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
        <ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" [cdkColumnDef]="disCol">
            <div *ngIf="disCol != 'addrow'">

                <th mat-header-cell *cdkHeaderCellDef>{{disCol}}</th>

                <td mat-cell (mouseover)="getData(element.get([disCol]))" 
                matTooltip={{dataFromService}} style="font-size: 18px !important;" *cdkCellDef="let element "> 
                    <div *ngIf="disCol != 'STATUS' ">
                      <input id="paste-me" (keyup.enter)="onEnter()" [formControl]="element.get([disCol])">
                    </div>
                    <div *ngIf="disCol == 'STATUS' ">
                    <mat-select [formControl]="element.get([disCol])">
                      <mat-option [value]="active" *ngFor="let active of activeList">
                        {{ active }}
                      </mat-option>
                    </mat-select>
                    </div>
                </td>


            </div>

               <div *ngIf="disCol == 'addrow'">
                <th mat-header-cell *cdkHeaderCellDef ></th>
           <div *ngIf="dynamicRows.length > 0 ? true : false">

          <td mat-cell style="width: 120px;" *cdkCellDef="let element; let i = index;"> 
            <input  [(ngModel)]="inputValue" placeholder="No.of Rows" *ngIf="i > dynamicRows.length - 1 ? true : false" (keyup.enter)="addnewRow()"/>
          </td>

           </div>

         <div *ngIf="dynamicRows.length === 0 ? true : false"> 

          <td mat-cell style="width: 120px;" *cdkCellDef="let element;" >
            <input [(ngModel)]="inputValue"    placeholder="No.of Rows" *ngIf="dynamicRows.length === 0 ? true : false" (keyup.enter)="addnewRow()"/>
          </td>
         </div>
               </div>
        </ng-container>

    </table>
    </div>
------
    getData(data){

    this.dataFromService = 'value';
       }

我需要对齐列名和数据。

如何获取这些数据？你能帮忙吗？

Answer 1

您可以使用[matTooltip]调用动态数据的函数：

<td mat-cell *matCellDef="let row" [matTooltip]="getTooltip(column, row)">{{row[column]}}</td>

然后在您的组件代码中，您可以根据需要使用列和行数据返回工具提示数据：

getTooltip(column, row) {
  return column + ' - ' + row[column];
}

这里是一个简单的例子：https://stackblitz.com/edit/material-table-dynamic-tooltip?embed=1&file=app/app.html