Question

我正在关注this教程，数据正在表格中呈现。现在我想在表头上实现matSort功能。现在，我通过getUser（）函数从服务获取数据，如下所示。

getUser(): Observable<User[]> {
   return this.http.get<User[]>('https://jsonplaceholder.typicode.com/users');
}

此处用户模型是如下所示的界面

export interface User {
 name: string;
 email: string;
 phone: string;
 company: {
    name: string;
 }
}

我正在使用组件中的服务功能，如下所示。

...
export class UsertableComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  dataSource = new UserDataSource(this.userService);
  displayedColumns = ['name', 'email', 'phone', 'company'];
  constructor(private http: HttpClient, private userService: UserService) { }
  ngOnInit() { }
  sortData(event) {
    this.dataSource = new UserDataSource(this.userService);
  }
}

export class UserDataSource extends DataSource<any> {
  constructor(private userService: UserService) {
    super();
  }
  connect(): Observable<User[]> {
    return this.userService.getUser();
  }
  disconnect() { }
}

我在模板中包含了所有mat-sort-header和matSort指令。我正在使用（matSortChange）事件触发组件中的sortData（）函数，如下所示。

<div>
  <mat-table [dataSource]="dataSource" matSort matSortActive="name" (matSortChange)="sortData($event)" matSortDirection="asc" matSortDisableClear>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.email}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="phone">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Phone </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.phone}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="company">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Company </mat-header-cell>
      <mat-cell *matCellDef="let user"> {{user.company.name}} </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>
</div>

现在，当点击任何表头并在事件参数中接收排序方向和标题名称时，将触发sortData函数。

但是不知道如何进一步分类数据？可能是我可以使用subscribe来获取json中的数据，进行排序并返回observable？

还有如何在名称上设置默认排序（asc）？

修改

我在this链接中找到了解决方案jjorbas 需要像这样使用MatTableDataSource

this.dataService.getReport().subscribe(results => {
if(!results)return;
this.ELEMENT_DATA = results;
this.displayedColumns = [.............];
this.tbDataSource = new MatTableDataSource(this.ELEMENT_DATA);
this.tbDataSource.sort = this.sort;
});

如何在Angular 5材质表中实现matSort

0 个答案: