问题描述
我的mat-table工作正常,但是当按照官方api文档添加mat-sort时,它在ngAfterViewInit失败,并显示以下消息
My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message
已经有关于此问题的SO帖子(请参阅以下链接) Mat-table排序演示不起作用,但是我仍然无法使它起作用.
There is already a SO post on this issue (see following link) Mat-table Sorting Demo not Working but I still am not able to get it working.
有人发现问题了吗?官方示例使用组件本身中定义的静态" MatTableDataSource,但是我是从后端查询的.
Does somebody spot the issue? The official example works with a "static" MatTableDataSourcedefined in the component itself, I am querying from my back-end, however.
任何帮助将不胜感激!
MatSortModule已导入到app.module.ts中,mat-sort-header指令已应用于列,并且ngAfterViewInit已与官方示例中的完全相同...
MatSortModule is already imported in app.module.ts, mat-sort-header directives are applied to the columns and the ngAfterViewInit is already exactly like in the official example...
import { Component, OnInit, ViewEncapsulation, ViewChild, AfterViewInit} from '@angular/core';
import { Feedback} from '../../../../../models/feedback';
import { FeedbackService} from '../../services/feedback.service';
import { MatTableDataSource, MatSort} from '@angular/material';
@Component({
selector: 'app-view-feedback',
templateUrl: './view-feedback.component.html',
styleUrls: ['./view-feedback.component.css'],
encapsulation: ViewEncapsulation.Emulated
})
export class ViewFeedbackComponent implements OnInit, AfterViewInit {
feedbacks: Feedback[] = [];
showSpinner: boolean = true;
displayedColumns: String[] = [
'id',
'user',
'timestamp',
'stars'
];
dataSource: MatTableDataSource < Feedback > ;
@ViewChild(MatSort) sort: MatSort;
constructor(private _feedbackService: FeedbackService) {}
ngOnInit() {
this._feedbackService.getFeedback.subscribe(
res => {
this.feedbacks = res;
this.dataSource = new MatTableDataSource(this.feedbacks);
}
);
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
}
<div class="mat-tbl-container mat-elevation-z8">
<mat-table #tbl [dataSource]="dataSource" matSort>
<!-- column definitions -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r._id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="user">
<mat-header-cell *matHeaderCellDef mat-sort-header>User Id</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r.user}} </mat-cell>
</ng-container>
<ng-container matColumnDef="timestamp">
<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r.timestamp}} </mat-cell>
</ng-container>
<ng-container matColumnDef="stars">
<mat-header-cell *matHeaderCellDef mat-sort-header>Stars</mat-header-cell>
<mat-cell *matCellDef="let r"> {{r.stars}} </mat-cell>
</ng-container>
<!-- tbl display settings -->
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
推荐答案
问题是下一段代码
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
发生在您实际上在这里预订表之前
is happen before you actually got your table in subscription here:
ngOnInit() {
this._feedbackService.getFeedback.subscribe(
res => {
this.feedbacks = res;
this.dataSource = new MatTableDataSource(this.feedbacks);
}
);
}
作为一种可能的解决方案,您可以通过Observable.zip
同步ngAfterViewInit
呼叫和getFeedback
订阅.请参考 RxJS zip文档
As a possible solution, you could synchronize ngAfterViewInit
call and getFeedback
subscription via Observable.zip
. Please refer to RxJS zip documentation
这篇关于垫子排序不适用于垫子桌子的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!