Question

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

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中提供的代码说明。

如何在错误列中的每个单元格上应用工具提示，以从与dataSource中该错误相同的对象中提取错误代码描述？

Answer 1

您需要进行一些更改-

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

Answer 2

通过条件数据绑定在mat-cell上添加matTooltip，或者您可以基于if column.id =='error'来使用* ngIf渲染两个mat-cell。

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

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

2 个答案: