如何使Material Table MatSort工作

问题描述

我对角形材料表不熟悉，只想生成带有过滤器和排序功能的垫子表。遵循一些在线教程之后，大部分内容都可以使用，但是我无法使sort函数正常工作。 代码如下： HTML

<div class="table-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
</div>

<div class="table-container mat-elevation-z8">
    
    <mat-table [dataSource]="tableDataSource" matSort>
        
        <ng-container matColumnDef="gene">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Gene </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.Gene}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="gDNAChange">
            <mat-header-cell *matHeaderCellDef mat-sort-header> gDNAChange </mat-header-cell>
            <mat-cell *matCellDef="let row"> {{row.GDnaChange}} </mat-cell>
        </ng-container>

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

    <mat-paginator [pageSizeOptions]="[5,10,25,50,100,500]"></mat-paginator>
</div>

打字稿

import { Component,OnInit,ViewChild,AfterViewInit } from '@angular/core';
import { MatPaginator,MatSort,MatTableDataSource } from '@angular/material';
import { GenotypeQueryService } from 'src/app/service/genotype-query.service';
import { GenotypeQueryResult } from 'src/app/model/resultModel/genotype-query-result.model';
   
@Component({
  selector: 'app-genotype-results',templateUrl: './genotype-results.component.html',styleUrls: ['./genotype-results.component.css']
})
export class GenotypeResultsComponent {

  // this is mat table
  tableDataSource: MatTableDataSource<GenotypeQueryResult>;
  displayedColumns: string[] = ['gene','gDNAChange'];

  @ViewChild(MatPaginator,{static: false}) paginator: MatPaginator;
  @ViewChild(MatSort,{static: true}) sort: MatSort;   

  constructor(
    private genoQueryService: GenotypeQueryService{     
      this.tableDataSource = new MatTableDataSource(this.genoQueryService.genotypeQueryList);
  }

  /**
 * Set the paginator and sort after the view init since this component will
 * be able to query its view for the initialized paginator and sort.
 */
  ngAfterViewInit() {
    this.tableDataSource.paginator = this.paginator;
    this.tableDataSource.sort = this.sort;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
    this.tableDataSource.filter = filterValue;
  }
}

tableDataSource是对象（GenotypeQueryResult）的数组。

export class GenotypeQueryResult {
       Gene: string
       GDnaChange: string
       RandomPatientId: string
       Omimdisease: string
       Moi: string
       ScreeningMethod: string
       Transcript: string
       Location: string
}

我想念那里吗？谢谢

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）