Question

MatSort无法正常工作！来自Firestore的Angular MaterialTableDatasource。

export class ApprovalDashboardComponent implements OnInit {

  displayedColumns: string[] = ['eventId', 'eventName', 'approvedStatus'];
  dataSource: MatTableDataSource<any>;

  @ViewChild(MatSort, {static: true}) sort: MatSort;


  constructor(private afs: AngularFirestore) {

      var user = firebase.auth().currentUser;
      this.afs.collection<any>('archive', ref => ref.where('eventHead','==', user.uid)).valueChanges().subscribe(data => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.sort = this.sort;
      });
   }

  ngOnInit() {
  }

}

<table mat-table [dataSource]="dataSource" matSort *ngIf="dataSource">

<ng-container matColumnDef="eventId">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Event Id </th>
    <td mat-cell *matCellDef="let row"> {{row.eventId}} </td>
</ng-container>

<ng-container matColumnDef="eventName">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Event Name </th>
    <td mat-cell *matCellDef="let row"> {{row.eventName}} </td>
</ng-container>

<ng-container matColumnDef="approvedStatus">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Approved Status </th>
  <td mat-cell *matCellDef="let row"> 
      <mat-icon color="primary" *ngIf="row.approvedStatus">check_circle</mat-icon>
      <mat-icon color="accent" *ngIf="!row.approvedStatus">block</mat-icon>
  </td>
</ng-container>

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

忽略。 matSort和mat-sort-header分别用于添加排序状态和显示到表格数据中; matSort和mat-sort-header分别用于添加排序状态和显示到表格数据中.matSort和mat -sort-header分别用于添加排序状态和显示到表格数据。matSort和mat-sort-header分别用于添加排序状态和显示到表格数据。

MatSort无法正常工作！来自Firestore的Angular Material Table数据源

0 个答案: