角材料表未对列进行排序

时间:2019-01-25 01:50:04

标签: angular

我创建了一个显示人员列表的组件。我想要列名旁边可以上下2条错误,以便对数据进行排序。

export class PatientListComponent implements OnInit, AfterViewInit  {

  patient: Observable<Patients>;
  public displayedColumns = ['LASTNAME', 'FIRSTNAME', 'STATUS', 'LASTINTERACTION'];
  public dataSource = new MatTableDataSource<Patients>();
  @ViewChild(MatSort) sort: MatSort;
  constructor(public data: DataService) { }

  ngOnInit() {  
    this.getPatientList();

  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
  }


  getPatientList(){
  this.data.getPatientList().subscribe(data => {
    this.patient = data;
    this.dataSource.data=data as Patients[];
  });  
  }
}

patientlist.html

<table mat-table [dataSource]="dataSource" matSort matSortStart="desc">
    <ng-container matColumnDef="FIRSTNAME">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> First Name 
    </th>
      <td mat-cell *matCellDef="let element"> 
   {{element.patientFirstName}} </td>
    </ng-container>

    <ng-container matColumnDef="LASTNAME">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Name  
   </th>
      <td mat-cell *matCellDef="let element"> {{element.patientLastName}} 
   </td>
    </ng-container>

    <ng-container matColumnDef="STATUS">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
      <td mat-cell *matCellDef="let element"> {{element.status}} </td>
    </ng-container>

    <ng-container matColumnDef="LASTINTERACTION">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Last 
        Interaction </th>
      <td mat-cell *matCellDef="let element"> {{element.updatedDate}} 
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

根本不对行进行排序。我需要编写任何服务/功能来对数据进行实际排序吗?

0 个答案:

没有答案