角材料 matSort 不起作用

Question

我通过http请求接收数据，分页器和过滤器工作，但排序指令没有任何错误。因此，我不知道我错在哪里，请帮我解决这个问题。

这是我的代码：

component.ts:

displayedColumns = ['token name', 'industry'];
  dataSource = new MatTableDataSource();
  id: any;
  resultsLength = 0;
  pageSize = 5;

  tokens: Tokens[];

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(private apiService: ApiService) { }

  ngOnInit() {
    this.loadTokens();
  }

  loadTokens() {
    this.apiService.getTokens()
    .subscribe((data: any) => {
      this.tokens = data;
      this.dataSource.data = this.tokens;
      console.log(this.dataSource);
      this.resultsLength = this.tokens.length;
    }, error => {
      console.log(error);
    });
  }

  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

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

component.html:

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

    <ng-container matColumnDef="token name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="industry">
      <mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
      <mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
    </ng-container>
  </mat-table>

  <mat-paginator #paginator [pageSize]="pageSize" [length]="resultsLength"></mat-paginator>

Answer 1

试试下面的代码：

HTML

    <div class="example-container mat-elevation-z8">
        <mat-table [dataSource]="dataSource" matSort>
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            <ng-container matColumnDef="name">
                <mat-header-cell *matHeaderCellDef mat-sort-header> TOKEN NAME </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
            </ng-container>

            <ng-container matColumnDef="description">
                <mat-header-cell *matHeaderCellDef mat-sort-header> INDUSTRY </mat-header-cell>
                <mat-cell *matCellDef="let row" [style.color]=""> {{row.description}} </mat-cell>
            </ng-container>


        </mat-table>

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


</div>

TS

displayedColumns = ['name', 'description'];
dataSource: MatTableDataSource<any>=  new MatTableDataSource(this.loadTokens());
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;

constructor() { }

ngOnInit() {
  this.loadTokens();
}

loadTokens() {
//you can use your loadTkens() function here and fetch Json data.
 return [
  {
    "name": "sss",
    "description": "It"
  },
  {
    "name": "aa",
    "description": "Hositality"
  },
  {
    "name": "bbb",
    "description": "Construction"
  },
  {
    "name": "ccc",
    "description": "sample data1"
  },
  {
    "name": "ddd",
    "description": "sample data2"
  },
  {
    "name": "eee",
    "description": "sample data3"
  },
  ];}

ngAfterViewInit() {
  this.dataSource.paginator = this.paginator;
 this.dataSource.sort = this.sort;
}

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

工作示例：https://stackblitz.com/edit/mat-sort?file=app/app.component.ts

Answer 2

如果 matColumnDef 显示“token name”，那么 mat-cell 也应该显示“row.token name”而不是 row.name。 我的意思是 matColumnDef 和 mat-cell 应该是一样的。