角度材料数据表排序不起作用/未显示箭头答案

【问题标题】：Angular Material data table sorting not working/no arrows shown角度材料数据表排序不起作用/未显示箭头
【发布时间】：2019-09-20 20:54:56
【问题描述】：

我正在尝试对我的角度材料数据表进行排序。

它可以正确显示数据但排序不起作用，它甚至没有显示标题旁边的小箭头以指示它正在排序。

这是我的组件

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import { Project, Activity, LearningObjective } from '../../models';
import { AuthService } from '../../services/auth.service';
import { MatSort, MatTableDataSource } from '@angular/material';
import { Router } from '@angular/router';

@Component({
  selector: 'app-activities',
  templateUrl: './activities.component.html',
  styleUrls: ['./activities.component.scss']
})
export class ActivitiesComponent implements OnInit, AfterViewInit {

  @ViewChild(MatSort) sort: MatSort;

  projects          : Array<Project>;
  loading           : boolean = false;
  displayedColumns  : string[] = ['name', 'goal', 'date', 'actions'];
  dataSource;

  constructor(
    private http          : HttpClient,
    private toastr        : ToastrService,
    public authService    : AuthService,
    private router        : Router
  ) {}

  ngOnInit() {
    this.getProjects();
  }

  getProjects() {
    this.loading = true;
    this.http.get<Project[]>('projects')
    .subscribe(
      response => {
        this.projects = response;
        this.dataSource = new MatTableDataSource(this.projects);
        this.loading = false;
      },
      err => {
        this.toastr.error(err.error.message, 'Error');
        this.loading = false;
      }
    )
  }

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

还有我的html

<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

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

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

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

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <div class="button-row">
          <button  mat-raised-button color="primary" [disabled]="loading ">
              <i class="fa fa-edit " *ngIf="!loading"></i>
              <i class="fa fa-spinner fa-spin " *ngIf="loading"></i>
            </button>
          <button mat-raised-button color="primary" (click)="deleteProject(element._id)" [disabled]="loading">
              <i class="fa fa-trash " *ngIf="!loading"></i>
              <i class="fa fa-spinner fa-spin " *ngIf="loading"></i>
            </button>
        </div>
        </td>
    </ng-container>

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

在这种情况下如何正确实现排序？无法像工作示例中那样单击表头，所以我想知道这里缺少什么。

【问题讨论】：

确保从@angular/platform-browser/animations 导入NoopAnimationsModule 或BrowserAnimationsModule，以便及时显示数据并显示箭头。

标签： angular angular-material

【解决方案1】：

它很可能不起作用，因为您在 ngOnInit 中加载数据的异步请求比调用组件生命周期挂钩 ngAfterViewInit 所花费的时间更长。因此，您的 dataSource 仍然未定义，并且排序设置不起作用。

您最初可以使用空数组创建一个新的MatTableDataSource 来解决此问题。在组件中声明数据源时：

dataSource = new MatTableDataSource([]);

然后在您的getProjects 中简单地执行以下操作：

this.dataSource.data = this.projects;
this.dataSource.sort = this.sort;

查看 stackblitz 寻求解决方案。我不得不模拟 HTTP 请求并使用延迟来模拟请求。

【讨论】：