时间戳

首页 > 解决方案 > 将 Mat-Tootip 应用于使用 *matRowDef 生成的 Mat-table 单元格

html - 将 Mat-Tootip 应用于使用 *matRowDef 生成的 Mat-table 单元格

问题描述

目前我正在使用一些数据来动态创建和填充表。列数保持一致，但行数根据数据而变化。表中有一列显示一个数字。我想添加一个在悬停时显示的工具提示，这是与该行中的数据相关的额外数据，因此在数据中它位于同一个对象中但是，我不知道如何访问各个单元格，因为所有行都是动态生成。

HTML：

<mat-form-field>
  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>

<mat-table #table [dataSource]="dataSource" matSort style="font-size: 4px">
    <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
        <mat-header-cell *matHeaderCellDef  mat-sort-header> {{column.value}} </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

列：

  columnNames = [{
    id: "id",
    value: "ID"

  }, {
    id: "ss",
    value: "SS"
  },
    {
      id: "cd",
      value: "CD"
    },
    {
      id: "type",
      value: "Type"
    }, {
      id: "type2",
      value: "Secondary Type"
    },
    {
      id: "motion",
      value: "Motion"
    },{
      id: "quantity",
      value: "Quantity"
    },{
      id: "in",
      value: "In"
    },{
      id: "error",
      value: "Error Code"
    }];

示例数据：

  {
    "id": 1,
    "ss": null,
    "cd": null,
    "type": null,
    "type2": null,
    "motion": null,
    "quantity": null,
    "in": null,
    "error_cd": "603",
    "error_nm": "Description for Error 603"
  },
    {
    "id": 2,
    "ss": null,
    "cd": null,
    "type": null,
    "type2": null,
    "motion": null,
    "quantity": null,
    "in": null,
    "error_cd": "605",
    "error_nm": "Description for Error 605"
  }

因此，当我将鼠标悬停在错误代码列的每个单元格上时，我想显示一个工具提示，其中包含 error_nm 中提供的代码描述。

如何将工具提示应用于错误列中的每个单元格，这将从与数据源中的错误相同的对象中提取错误代码描述？

标签： htmlangulartypescriptangular-material

解决方案

您需要进行一些更改 -

1.更改columnNames数组中的列名

{
    id: "error",
    value: "Error Code"
 }

2.表格单元格定义

<mat-cell [matTooltip]="column.id == 'error_cd' ? element['error_nm'] : null" *matCellDef="let element"> {{element[column.id]}} </mat-cell>

这是工作副本https://stackblitz.com/edit/angular-disable-file-input-on-radio-sbd37j

推荐阅读