时间戳

首页 > 解决方案 > 选择表标题名称后，有什么方法可以获取与表中的列对应的值？

javascript - 选择表标题名称后，有什么方法可以获取与表中的列对应的值？

问题描述

我有一个使用来自 API 的 json 数据的表。我想选择一个表格标题及其相应的值。表标题和值可能会因不同的数据集而改变。

我正在使用 Angular Material 来创建表格。

这是创建表格的模板代码 -

<table mat-table [dataSource]="dataSource">
    <ng-container *ngFor="let disCol of displayedColumns; let colIndex = 
     index" matColumnDef="{{ disCol }}">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox
            #checkbox
            (change)="onClickSelect(checkbox)"
            value={{disCol}}
            labelPosition="before"
            >{{ disCol }}
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let element">
            {{ element[disCol] }}
        </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true">
    </tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns">
    </tr>
</table>

这是组件 ts 文件，其中dataSource和displayedColumns值来自服务。

showTableData() {
  this.tableLoading=true
  this.showTab= !this.showTab;
  this.displayedColumns= this.fileService.objectKey ;
  this.dataSource = this.fileService.totalObject ;
  this.tableLoading=false;
}
onClickSelect(event){
  console.log('Corresponding Column values',event.value)
}

所以这里的实际输出将是 - 获得表格后，我将可以选择任何特定列并获取相应的值。而且我不想选择多个列。

提前感谢您在这里的时间。

标签： javascripthtmlangulartypescripthtml-table

解决方案

推荐阅读