[英]Angular Material data table sorting not working/no arrows shown
我正在尝试对我的角度材料数据表进行排序。
它正确显示数据但排序不起作用,它甚至不显示标题旁边的小箭头以指示它正在排序。
这是我的组件
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>
在这种情况下如何正确实现排序? 无法像在工作示例中那样单击表标题,所以我想知道这里缺少什么。
它很可能不起作用,因为您在ngOnInit
加载数据的异步请求比调用组件生命周期钩子ngAfterViewInit
花费的时间更长。 因此您的dataSource
仍未定义,排序设置将不起作用。
您最初可以创建一个带有空数组的新MatTableDataSource
来解决此问题。 当您在组件中声明数据源时:
dataSource = new MatTableDataSource([]);
然后在您的getProjects
简单地执行以下操作:
this.dataSource.data = this.projects;
this.dataSource.sort = this.sort;
查看stackblitz以获取解决方案。 我不得不模拟 HTTP 请求并使用延迟来模拟请求。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.