首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >matSort在mat-table角度中不能正常工作

matSort在mat-table角度中不能正常工作
EN

Stack Overflow用户
提问于 2018-05-29 16:16:44
回答 2查看 2.9K关注 0票数 2

我的.html文件:

<mat-table [dataSource]="dataSource" padding matSort>

  <ng-container matColumnDef="uid">
    <!--<mat-header-cell *matHeaderCellDef mat-sort-header>Building UID</mat-header-cell>-->
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Building UID
    </mat-header-cell>
    <mat-cell *matCellDef="let tree" padding>{{tree.uid}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="address">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Address
    </mat-header-cell>
    <mat-cell *matCellDef="let tree" padding>{{tree.location.address}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="zipCode">
    <mat-header-cell *matHeaderCellDef mat-sort-header>
      Zip code
    </mat-header-cell>
    <mat-cell *matCellDef="let tree" padding>{{tree.location.zipCode}}</mat-cell>
  </ng-container>

  ...

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

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

</mat-table>

我的.ts文件:

@Component({
  selector: 'page-buildings',
  templateUrl: 'buildings.html',
})
export class BuildingsPage {
  @ViewChild(MatSort) sort: MatSort;
  ...
  private displayedColumns: string[] = ["uid", "address", "zipCode", "city", "country", "treeDetails"]; // tslint:disable-line
  private dataSource: MatTableDataSource<any>;

  ...
  constructor(...) {

    this.dataSource = new MatTableDataSource(...);
    this.dataSource.sort = this.sort;
  }
  ...
}

但是在我的mat-table中,排序只适用于第一列"uid",而不适用于其他列。

我从这个答案(第一个答案)中了解到,在*matColumnDef="firstString"{{tree.secondString}},中,firstString必须等于secondString才能工作,但在我的例子中,它是link,我使用了两点。

你知道为什么会发生这种情况,以及如何让它工作吗?

请看下图:

当我单击"Building UID“列时,mat-table将被排序,一切工作正常。但当我单击其他列(地址、邮政编码、城市、国家)时,它只对前两行进行排序,只有升序排序有效(降序排序无效),其余行根本不排序。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50579494

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档