相关疑难解决方法(0)

Angular 5材料数据表排序不起作用

所以我在Angular 5应用程序中有一个工作的角度材料数据表,但是当我尝试添加排序功能时(基于这里的官方文档:https://material.angular.io/components/table/overview#sorting和例如:https://stackblitz.com/angular/dnbermjydavk?file = app%2Ftable-overview-example.html)我无法让它工作.它似乎添加了排序功能/箭头,我可以点击它,但没有任何反应.

这是我的HTML:

<div class="container">
  <mat-table #table class="dataTable" *ngIf="showDataForm;else loadingTemplate" [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.id}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="titel">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Titel</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.titel}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="EADDraftingStage">
      <mat-header-cell *matHeaderCellDef mat-sort-header>EADDraftingStage</mat-header-cell>
      <mat-cell *matCellDef="let item">{{item.EADDraftingStage}}</mat-cell>
    </ng-container>

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

  <mat-paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

<ng-template #loadingTemplate>
  <div>
      <p>Please wait, the data is loading...</p>
      <img src="../../assets/giphy.gif">
  </div>
</ng-template>

<button mat-raised-button class="submitButton" …
Run Code Online (Sandbox Code Playgroud)

angular-datatables angular

4
推荐指数
2
解决办法
7428
查看次数

标签 统计

angular ×1

angular-datatables ×1