我在数据表方面遇到了一些问题-背景是我需要通过可观察的订阅同时进行多个API调用，然后将这些API组合成一个数据结构。我需要将此数据传递到成功完成的数据表中，但是，一旦加载了数据，我的ViewChild和MatPaginator的MatSort未检测到更改，因此我的分页器和排序功能就好像没有数据一样，即页面中的值为0。
这里是否需要做一些规范之外的事情，因为在ngAfterViewInit完成之后我的数据加载仍在执行。
我尝试过的一些事情：
ChangeDetectorRef并运行ChangeDetectorRef.DetectChanges()无济于事希望这对我的代码更有意义（我已尝试通过删除函数来使其简短，但是多个函数正在将值写入dataSource数组（this.dataHashArray）
data-table.html
<div class="global-container-padding">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search Shares">
</mat-form-field>
<div class="data-container">
<table mat-table [dataSource]="dataSource" matSort class="share-table mat-elevation-z8">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<!-- SVMName Column -->
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.Name}} </td>
</ng-container>
<!-- shareName Column -->
<ng-container matColumnDef="shareName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Share Name </th>
<td mat-cell *matCellDef="let row"> {{row.shareName}} </td>
</ng-container>
<!-- storagePath Column -->
<ng-container matColumnDef="storagePath">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Storage Path </th>
<td mat-cell *matCellDef="let row"> {{row.storagePath}} </td>
</ng-container>
<!-- Protocol Column -->
<ng-container matColumnDef="Protocol">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Protocol </th>
<td mat-cell *matCellDef="let row"> {{row.Protocol}} </td>
</ng-container>
<!-- exists Column -->
<ng-container matColumnDef="exists">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Exists </th>
<td mat-cell *matCellDef="let row"> {{row.exists}} </td>
</ng-container>
<ng-container matColumnDef="HostId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Host ID </th>
<td mat-cell *matCellDef="let row"> {{row.HostId}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></tr>
</table>
<mat-paginator [length]="length"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions">
</mat-paginator>
</div>
</div>
data-table.ts
import {AfterViewInit, Component, Injectable, NgZone, OnInit, ViewChild} from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator, MatSort } from '@angular/material';
@Injectable()
export class DataComponent implements OnInit, AfterViewInit {
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
private length = 0;
private pageSize = 25;
private pageSizeOptions: number[] = [5, 10, 25, 100];
constructor(
private ShareService: ShareService,
private _snackBar: MatSnackBar,
private ngZone: NgZone
) {
this.dataHashArray = [];
}
public ngOnInit(): void {
this.displayedColumns = ['select', 'Name', 'shareName', 'storagePath', 'Protocol', 'exists', 'HostId'];
if(this.dataHashArray == null) {
this.dataSource = new MatTableDataSource<DataHash>([]);
} else {
this.dataSource = new MatTableDataSource<DataHash>(this.dataHashArray);
}
for(let nx = 0; nx < this.store.length; nx++) {
if(this.store[nx]['type'] == 'nas') {
this.loadApp(this.store[nx]);
}
}
}
public ngAfterViewInit(): void {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
this.ngZone.run(() => {
this.ShareService.getShares(this.Token, '').subscribe( shares => {
this.DataHashBuild(shares, this.Token, HostID);
});
});
public DataHashBuild(Shares: string, Token: string | null, HostId: string | null) {
this.ShareService.getVserverList().subscribe(vServer => {
for (let x = 0; x < vServer.length; x++) {
this.ShareService.getShares(vServer[x]).subscribe(nShares => {
for (let i = 0; i < nShares.length; i++) {
let exists: boolean = false;
for (let j = 0; j < Shares.length; j++) {
if (Shares[j]['hostname'] == `${vServer[x]}_cifs` &&
Shares[j]['exportPoint'] == nShares[i]['share-name']) {
exists = true;
let paramStr = `?host_id=${Shares[j]['hostId']}&share_id=${Shares[j]['id']}`;
this.ShareService.getShare(Token, paramStr).subscribe(getShare => {
console.log(getShare);
});
}
}
this.dataHashArray.push({
SVMName: vServer[x],
shareName: `\\\\${nShares[i]['cifs-server']}\\${nShares[i]['share-name']}`,
storagePath: `/${nShares[i]['volume']}`,
Protocol: 'SMB',
exists: exists,
HostId: HostId
});
this.dataSource = new MatTableDataSource<DataHash>(this.dataHashArray);
this.renewDataSource();
}
});
}
});
}
public renewDataSource() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ShareService.ts
public getVserverList(): Observable<vServerInterface>{
return this.http.post(url, data, {headers: headers, responseType: 'text'})
.pipe(map(message => {
xmlObj = this.parseXml(message);
for (let i = 0; i < xmlObj.getElementsByTagName('vserver-name').length; i++) {
outputArray.push(xmlObj.getElementsByTagName('vserver-name')[i].textContent);
}
return outputArray;
}));
}
通过订阅进行的API调用只是可观察的HTTPClient GET请求，并返回http调用。
尝试一下
<mat-paginator [pageSizeOptions]="[20, 30, 50]" showFirstLastButtons></mat-paginator>
在.ts文件中的语句下面导入
import {MatPaginator} from '@angular/material/paginator';
复制下面一行到您的类的构造函数
@ViewChild(MatPaginator) paginator: MatPaginator;
复制功能下方的行
this.dataSource.paginator = this.paginator;