Есть ли способ получить значения, соответствующие столбцу в таблице при выборе названия заголовка таблицы?

Есть ли способ получить значения, соответствующие столбцу в таблице после выбора имени заголовка таблицы?

У меня есть таблица с использованием данных JSON из API. Я хочу выбрать заголовок таблицы и соответствующие ей значения. Заголовок и значения таблицы могут изменяться для разных наборов данных.

Я использую угловой материал для создания таблицы.

Вот код шаблона для создания таблицы

 {amp}lt;table mat-table [dataSource]="dataSource"{amp}gt; {amp}lt;ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{ disCol }}"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef{amp}gt; {amp}lt;mat-checkbox #checkbox (change)="onClickSelect(checkbox)" value={{disCol}} labelPosition="before" {amp}gt;{{ disCol }} {amp}lt;/mat-checkbox{amp}gt; {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element"{amp}gt; {{ element[disCol] }} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr mat-row *matRowDef="let row; columns: displayedColumns"{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; отличительный {amp}lt;table mat-table [dataSource]="dataSource"{amp}gt; {amp}lt;ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{ disCol }}"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef{amp}gt; {amp}lt;mat-checkbox #checkbox (change)="onClickSelect(checkbox)" value={{disCol}} labelPosition="before" {amp}gt;{{ disCol }} {amp}lt;/mat-checkbox{amp}gt; {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element"{amp}gt; {{ element[disCol] }} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr mat-row *matRowDef="let row; columns: displayedColumns"{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; воды {amp}lt;table mat-table [dataSource]="dataSource"{amp}gt; {amp}lt;ng-container *ngFor="let disCol of displayedColumns; let colIndex = index" matColumnDef="{{ disCol }}"{amp}gt; {amp}lt;th mat-header-cell *matHeaderCellDef{amp}gt; {amp}lt;mat-checkbox #checkbox (change)="onClickSelect(checkbox)" value={{disCol}} labelPosition="before" {amp}gt;{{ disCol }} {amp}lt;/mat-checkbox{amp}gt; {amp}lt;/th{amp}gt; {amp}lt;td mat-cell *matCellDef="let element"{amp}gt; {{ element[disCol] }} {amp}lt;/td{amp}gt; {amp}lt;/ng-container{amp}gt; {amp}lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;tr mat-row *matRowDef="let row; columns: displayedColumns"{amp}gt; {amp}lt;/tr{amp}gt; {amp}lt;/table{amp}gt; 

Это файл ts компонента, в котором значения dataSource и dataSource поступают из службы.

 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) } 

Так что здесь фактический результат будет: — После получения таблицы у меня будет возможность выбрать любой конкретный столбец и получить соответствующие значения. И я не хочу выбирать несколько столбцов.

Заранее спасибо за ваше время здесь.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector