почему сортировка DataTable не работает на Angular 9 - PullRequest
Новая
       3

почему сортировка DataTable не работает на Angular 9

0 голосов
/ 24 февраля 2020

Я хочу добавить к моим возможностям сортировки, фильтрации, разбивки на страницы, но это не работает, например, сортировка здесь, я делал все, что угодно, но только ...

html: 

<mat-table  [dataSource]="dataSource" matSort>
    <ng-container matColumnDef = "Agent" >
        <mat-header-cell *matHeaderCellDef mat-sort-header class="datatable_header"> Agent </mat-header-cell>
        <mat-cell *matCellDef="let user"> {{user?.Fname}} </mat-cell>

    </ng-container>
    <ng-container matColumnDef = "cin">
        <mat-header-cell *matHeaderCellDef mat-sort-header class="datatable_header"> CIN </mat-header-cell>
        <mat-cell *matCellDef="let user"> {{user?.CIN}} </mat-cell>...

Компонент: 

export class DashboardComponent implements OnInit {


  dispalyedColumns = ['Agent','cin','email','age','role'];
  @ViewChild(MatSort) sort: MatSort;

... 

  ngOnInit() {
    this.dataSource.sort = this.sort;

... 

export class User_infoDataSource extends DataSource<any>{
  sort: MatSort;  
  constructor(private CollectionService: CollectionService){
  super();}
  connect(): Observable<User_info[]>{
    this.CollectionService.getUsers().subscribe((col=>{
      console.log("data table" + col); 
    }));
    return this.CollectionService.getUsers();
  }
  disconnect(){}
}

module.ts 

@NgModule({
    imports: [
      DataTablesModule,
      MatTableModule,
      MatCardModule,
      MatDividerModule,
      MatSortModule,
      RouterModule.forChild(routes)
    ],
    exports: [
      RouterModule, 
      DataTablesModule,
      MatTableModule,
      MatCardModule,
      MatDividerModule,
      MatSortModule
    ]
})

Rq: Я вижу стрелки сортировки, но когда я нажимаю, ничего не происходит.

1 Ответ

0 голосов
/ 24 февраля 2020

Ваш matColumnDef должен соответствовать имени поля. Таким образом, в вашем первом столбце измените matColumnDef = "Agent" на matColumnDef = "Fname" и обновите ваши столбцы для отображения соответствующих столбцов.

...