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

问题描述

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

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

这是我的组件

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';从'@angular/common/http' 导入 { HttpClient };从'ngx-toastr'导入{ToastrService}；从'../../models'导入{项目，活动，学习目标}；从 '../../services/auth.service' 导入 { AuthService };从 '@angular/material' 导入 { MatSort, MatTableDataSource };从@angular/router"导入{路由器}；@成分({选择器:'应用程序活动'，templateUrl: './activities.component.html',styleUrls: ['./activities.component.scss']})导出类 ActivitiesComponent 实现 OnInit、AfterViewInit {@ViewChild(MatSort) 排序:MatSort；项目:阵列<项目>；加载:布尔=假；displayColumns : string[] = ['name', 'goal', 'date', 'actions'];数据源;构造函数(私有 http : HttpClient,私人 toastr : ToastrService,公共 authService : AuthService,专用路由器:路由器) {}ngOnInit() {this.getProjects();}获取项目(){this.loading = true;this.http.get('projects').订阅(响应=>{this.projects = 响应；this.dataSource = new MatTableDataSource(this.projects);this.loading = false;},错误 =>{this.toastr.error(err.error.message, '错误');this.loading = false;})}ngAfterViewInit() {this.dataSource.sort = this.sort;}}

还有我的 html

<table mat-table [dataSource]="dataSource" matSort><ng-container matColumnDef="name"><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>名称</th><td mat-cell *matCellDef="let element">{{element.name}} </td></ng-容器><ng-container matColumnDef="目标"><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>目标</th><td mat-cell *matCellDef="let element">{{element.goal}} </td></ng-容器><ng-container matColumnDef="date"><th mat-h​​eader-cell *matHeaderCellDef mat-sort-header>日期 </th><td mat-cell *matCellDef="let element">{{element.date}} </td></ng-容器><ng-container matColumnDef="actions"><第一个 mat-h​​eader-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 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>
</td></ng-容器><tr mat-h​​eader-row *matHeaderRowDef="displayedColumns"></tr><tr mat-row *matRowDef="let row; columns:displayedColumns;"></tr>

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

解决方案

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

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

dataSource = new MatTableDataSource([]);

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

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

<块引用>

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

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.

Here's my component

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;
  }
}

And my 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.

解决方案

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.

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([]);

And then in your getProjects simply do this:

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

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

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