无法使用 angular material2 对 table 进行排序

Question

我有一个 Angular material table。 HTML 如下：

<act-toolbar [leftColor]="'blue'" [rightColor]="'blue'"></act-toolbar>
<mat-spinner *ngIf="!dataSource" style="margin:218px 45%"></mat-spinner>

<div fxLayout="column" *ngIf="dataSource">
  <div class="example-filter-box" fxLayout="column">
    <h4 class="act-section-header">COMMITTEE SELECTION</h4>
    <form class="example-form">
      <mat-form-field class="example-full-width" shouldPlaceholderFloat="false">
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Please enter CAMS Check Name or CAMS ID number.">

        <!-- <input placeholder="Please enter CAMS Check Name or CAMS ID number." matInput #input (keyup)='searchElements(input.value)'> -->
      </mat-form-field>
    </form>
  </div>
  <div style="width:60%;margin: 0 auto; padding-bottom: 20px;" fxFlexAlign="center" fxFlexOffset="20px">
    <div fxFlex fxLayout="row" fxLayoutAlign="end">
      <!-- Added by Arka for ShowSubmitted Button -->
      <div *ngIf="showSubmitted">
        <!-- Added by Arka for ShowSubmitted Button ends-->
        <button mat-button class="act-button outline-blue-text " [ngClass]="{'fill': showSubmitted == true}" (click)="toggleSubmitted()">Show Submitted</button>
      </div>
    </div>
  </div>
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-table #table [dataSource]="dataSource" matSort fxFlex="60" class="">

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> CAMS Check Name </mat-header-cell>
        <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.name}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="cdate">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Creation Date </mat-header-cell>
        <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.cdate | date:'mediumDate'}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="createdby">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Created By </mat-header-cell>
        <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.createdby}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="camsid">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> CAMS ID </mat-header-cell>
        <mat-cell *matCellDef="let element" style="padding-left:10px"> {{element.camsid}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="status">
        <mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left:10px"> Status </mat-header-cell>
        <mat-cell actQuestionFunction style="padding-left:10px" [config]="{ lob : { camsId: element.camsid ,'true': 'func1', 'false':' func2'} }" *matCellDef="let element"> {{element.sqldbinfo.status}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row [routerLink]="['/overview', row.camsid]" (click)="setCurrentCams(row)" [queryParams]="{ name: row.name, camsId: row.camsid }" [ngClass]="{'hidden': (row.status == 'Submitted' && showSubmitted == false), 'submitted': row.status == 'Submitted'}" *matRowDef="let row; columns: displayedColumns  "></mat-row>
    </mat-table>
  </div>
  <div style="padding-top: 20px;"></div>

</div>

我正在创建一个 table 并想对其进行排序，但遗憾的是数据正在呈现，但没有进行排序。

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections';
import { CamsService } from '../services/cams.service';
import { ActauthService } from '../actauth.service';
import { LocalDataService } from '../services/local-data.service';
import { ActService } from '../services/act.service';
import { ActModalService } from '../act-modal/act-modal-service.service';

@Component({
  selector: 'app-camslist',
  templateUrl: './camslist.component.html',
  styleUrls: ['./camslist.component.less']
})
export class CamslistComponent implements OnInit {

  displayedColumns = ['name', 'cdate', 'createdby', 'camsid', 'status'];
  dataSource;
  StatusText: Array<string>;
  SubmittedButtonShowHide: Boolean;
  constructor(
    private camsService: CamsService,
    private auth: ActauthService,
    private localDataService: LocalDataService,
    private actService: ActService,
    private modalService: ActModalService) {

  }
  @ViewChild(MatSort) sort: MatSort;
  showSubmitted: boolean = false;
  ngOnInit() {
    this.auth.getMyLogon().subscribe(
      res => {
        res.EmployeeId = 29007154;
        this.camsService.all(res).subscribe(
          cams => {
            if (cams.length == 0) {
              this.modalService.openNoCamsIdMsgModal();
            } else {
              this.dataSource = new MatTableDataSource(cams);
              this.dataSource.sort = this.sort;
            };
          })
      })
  }

  // ngAfterViewInit() {
  // }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue;
  }
  toggleSubmitted() {
    this.showSubmitted = !this.showSubmitted;
  }
  CheckStatus() {
    const array = this.dataSource.data;
    // tslint:disable-next-line:forin
    for (const st in array) {
      this.StatusText = array[st].sqldbinfo.status;
      if (!(this.StatusText.includes('Submitted', 0))) {
        return this.SubmittedButtonShowHide = true;
      } else {
        return this.SubmittedButtonShowHide = false;
      }
    }
  }


  setCurrentCams(selcams) {
    //Test data
    selcams.camsid = 66502;
    this.actService.tabs.cams = selcams;
    this.localDataService.setLocalStorage("selcams", selcams);
  }
}


export interface Element {
  name: string;
  cdate: string;
  createdby: string;
  camsid: number;
  status: string;
}

这是 stable 版本，数据正在呈现，但没有进行排序。每当我在顶部 class 级别添加 AfterViewInit 和 OnInit 时，它总是给我一个错误。请帮帮我。

Answer 1

你的代码应该是这样的

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

你的数据源是这样声明的：

 dataSource;

您使用 HTTP 调用来填充它：

this.auth.getMyLogon().subscribe(
  res => {
    res.EmployeeId = 29007154;
    this.camsService.all(res).subscribe(
      cams => {
        if (cams.length == 0) {
          this.modalService.openNoCamsIdMsgModal();
        } else {
          this.dataSource = new MatTableDataSource(cams);
          this.dataSource.sort = this.sort;
        };
      })
  })

错误

Cannot set property 'sort' of undefined at CamslistComponent.ngAfterViewInit (camslist.component.ts:48) at callProviderLifecycles (core.js:12706)

因为您的 ngAfterViewInit 运行在 HTTP 调用结束之前。所以你的数据源没有实例化，因此是错误的。

无法使用 angular material2 对 table 进行排序

Unable to sort a table using angular material2

lifecycle

angular-material2

angular

angular-cdk