角材料数据表排序不起作用/未显示箭头 [英] Angular Material data table sorting not working/no arrows shown

问题描述

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

I'm trying to implement sorting on my angular material data table.

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

It's displaying the data correctly but the sorting doesn't work, it doesn't even show the small arrow next to the header to indicate it's being sorted.

这是我的组成部分

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>

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

How do I correctly implement the sort in this case? Can't click the table headers like in a working example so I'm wondering what is missing here.

推荐答案

它很可能无法正常工作，因为您的异步请求将数据加载到 ngOnInit 中所需的时间比组件生命周期挂钩所需的时间更长 ngAfterViewInit 被调用.因此，您的 dataSource 仍未定义，并且排序设置不起作用.

It most likely won't work because your async request to load the data in the ngOnInit takes longer than for the component lifecycle hook ngAfterViewInit to be called. Therefore your dataSource is still undefined and the setting of the sorting won't work.

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

You could initially create a new MatTableDataSource with an empty array to get around this problem. When you declare the datasource in your component:

dataSource = new MatTableDataSource([]);

然后在您的 getProjects 中只需执行以下操作:

And then in your getProjects simply do this:

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

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

Check out the stackblitz for a solution. I had to mock the HTTP request and used a delay to simulate the request.

这篇关于角材料数据表排序不起作用/未显示箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！