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如果说“令牌名称”，则mat-cell也应该说“ row.token名称”而不是row.name。我的意思是matColumnDef和mat-cell应该相同。

角度材料matSort不起作用

2 个答案: