角度材料排序和分页器不起作用

Question

所以我在实现MatSort和MatPaginator时遇到了问题。我遵循了官方角度材料网站(https://material.angular.io/components/sort/overview(上的教程。但是，每次我尝试实现它时，它都不起作用。我的控制台日志中有 0 个错误，所以我不知道我错过了什么。

messages.component.ts：

import { Component, OnInit, ViewChild, } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { MessagesService } from '../shared/services/messages.service';
import { IMessageCredentials } from '../shared/interfaces/messageCredentials.interface';
import { IMessage, IMessageData } from '../shared/interfaces/messages.interface';
import { IDriverData } from '../shared/interfaces/driver.interface';
import { DriverService } from '../shared/services/driver.service';
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {  
name: string = '';
number: string = '';
content: string = '';
dataSource: MatTableDataSource<IMessageData>
messagesData: IMessageData[];
driverData: IDriverData[];
displayedColumns: string[] = ['number', 'chauffeur' , 'executionDateTime', 'textDecoded', 'richting'];
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private messageService: MessagesService, private driverService: DriverService) { 
this.getDrivers();
this.dataSource = new MatTableDataSource(this.messagesData);
}
ngOnInit(): void {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.getMessages();
}
getMessages() {
let credentials = <IMessageCredentials>{};
credentials.login = "";
credentials.password = "";
credentials.unreadOnly = false;
this.messageService.getAll(credentials).subscribe(response => {
this.messagesData = response;
this.dataSource = new MatTableDataSource(this.messagesData);
})    
}
sendMessages() {
let message = <IMessage>{};
message.login = "";
message.password = "";
message.number = this.number;
message.content = this.content;
this.messageService.sendMessage(message).subscribe(response => {
console.log("Send message: " + response)
})
window.alert("Send message to: " + this.number);
this.content = "";
}
getDrivers() {
let isAutoComplete: boolean = true;
this.driverService.getDrivers(isAutoComplete).subscribe(response => {
this.driverData = response;
})
}
checkForDriverNames(phoneNumber: string) : string {
let result = "";
this.driverData.forEach(element => {      
if (element.phone === phoneNumber){
result = element.name;
}
});
return result;
}
checkTraffic(folderNumber: string) : string {
let result = parseInt(folderNumber) === 1 ? 'Ontvangen' : 'Verstuurd';
return result;
}
}

messages.component.html：

<div class="messages">
<button mat-raised-button (click)="getMessages()">Refresh</button>
<table mat-table [dataSource]="dataSource" class="table" matSort>
<ng-container matColumnDef="number">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Telnr.</th>
<td mat-cell *matCellDef="let row">{{row.number}}</td>
</ng-container>
<ng-container matColumnDef="chauffeur">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chauffeur</th>
<td mat-cell *matCellDef="let row">{{checkForDriverNames(row.number)}}</td>
</ng-container>
<ng-container matColumnDef="executionDateTime">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Timestamp</th>
<td mat-cell *matCellDef="let row">{{row.executionDateTime}}</td>
</ng-container>
<ng-container matColumnDef="textDecoded">
<th mat-header-cell *matHeaderCellDef mat-sort-header>UserDataText</th>
<td mat-cell *matCellDef="let row">{{row.textDecoded}}</td>
</ng-container>
<ng-container matColumnDef="richting">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Richting</th>
<td mat-cell *matCellDef="let row">{{checkTraffic(row.folder)}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
</div>

messages.module.ts：

import { NgModule } from '@angular/core';
import { MessagesComponent } from './messages.component';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from '../shared/shared.module';
import {
MatSelectModule,
MatCardModule,
MatTableModule,
MatCheckboxModule,
MatPaginatorModule,
MatSortModule
} from '@angular/material';
@NgModule({
declarations: [
MessagesComponent
],
imports: [
BrowserModule,
SharedModule,
MatCardModule,
MatSelectModule,
MatTableModule,
MatCheckboxModule,
MatPaginatorModule,
MatSortModule
],
exports: [
MessagesComponent    
],
providers: [],
bootstrap: []
})
export class MessagesModule { }

Answer 1

这一行：

this.dataSource = new MatTableDataSource(this.messagesData); 

它覆盖了分页器和排序(重置为空(，因此请尝试如下：

this.messageService.getAll(credentials).subscribe(response => {
this.messagesData = response;
this.dataSource = new MatTableDataSource(this.messagesData);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});

Answer 2

据我所知，这是一个async和sync方法的问题。 试试这个：

ngOnInit(): void {
this.messageService.getAll(credentials).subscribe(response => {
this.messagesData = response;
this.dataSource = new MatTableDataSource(this.messagesData);    
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}) 
}

Answer 3

从构造函数中删除此行，因为 messagesData 尚未填充。

this.dataSource = new MatTableDataSource(this.messagesData);

加上将此行添加到您的ngInit

// If the user changes the sort order, reset back to the first page.
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);

我从不使用 Angular 材质 8.x，但是如果它不起作用，您可以尝试更改此行(这是我使用 Angular 材质 7.x 的方式(

this.dataSource = new MatTableDataSource(this.messagesData);

自

this.dataSource.data = new MatTableDataSource(this.messagesData);

完整代码(未经测试(

import { Component, OnInit, ViewChild, } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
import { MessagesService } from '../shared/services/messages.service';
import { IMessageCredentials } from '../shared/interfaces/messageCredentials.interface';
import { IMessage, IMessageData } from '../shared/interfaces/messages.interface';
import { IDriverData } from '../shared/interfaces/driver.interface';
import { DriverService } from '../shared/services/driver.service';
@Component({
selector: 'app-messages',
templateUrl: './messages.component.html',
styleUrls: ['./messages.component.scss']
})
export class MessagesComponent implements OnInit {  
name: string = '';
number: string = '';
content: string = '';
dataSource: MatTableDataSource<IMessageData>
messagesData: IMessageData[];
driverData: IDriverData[];
displayedColumns: string[] = ['number', 'chauffeur' , 'executionDateTime', 'textDecoded', 'richting'];
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private messageService: MessagesService, private driverService: DriverService) { 
this.getDrivers();
}
ngOnInit(): void {
// If the user changes the sort order, reset back to the first page.
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
this.getMessages();
}
getMessages() {
let credentials = <IMessageCredentials>{};
credentials.login = "";
credentials.password = "";
credentials.unreadOnly = false;
this.messageService.getAll(credentials).subscribe(response => {
this.messagesData = response;
this.dataSource = new MatTableDataSource(this.messagesData);
})    
}
sendMessages() {
let message = <IMessage>{};
message.login = "";
message.password = "";
message.number = this.number;
message.content = this.content;
this.messageService.sendMessage(message).subscribe(response => {
console.log("Send message: " + response)
})
window.alert("Send message to: " + this.number);
this.content = "";
}
getDrivers() {
let isAutoComplete: boolean = true;
this.driverService.getDrivers(isAutoComplete).subscribe(response => {
this.driverData = response;
})
}