Как получить данные каждой ячейки после ввода в ячейку таблицы динамических c столбцов / строк в angular8?

Question

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

Html кода таблицы Dynami c, как -

<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] для вызова функции для динамических c данных:

<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