Применить Mat-Tootip к ячейке Mat-таблицы, сгенерированной с использованием * matRowDef - PullRequest
Новая
       7

Применить Mat-Tootip к ячейке Mat-таблицы, сгенерированной с использованием * matRowDef

0 голосов
/ 12 октября 2018

В настоящее время я использую некоторые данные для динамического создания и заполнения таблицы.Количество столбцов остается неизменным, но количество строк изменяется в зависимости от данных.В таблице есть один столбец, который показывает число.Я хочу добавить всплывающую подсказку, которая показывает при наведении мыши, что является дополнительными данными, относящимися к данным в этой строке, поэтому в данных они находятся в одном и том же объекте, однако я не знаю, как получить доступ к отдельным ячейкам, так как все строкидинамически генерируется.

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.

Как применить всплывающую подсказку к каждой ячейке в столбце ошибок, которая будет извлекать описание кода ошибки из того же объекта, что и эта ошибка в источнике данных?

Ответы [ 2 ]

0 голосов
/ 12 октября 2018

Необходимо внести пару изменений -

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

0 голосов
/ 12 октября 2018

Добавьте matTooltip в ячейку mat с условной привязкой данных, или вы можете иметь две ячейки mat с * ngIf для рендеринга на основе if column.id == 'error'. 

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