Question

我试图在一个组件中显示多个数据表。我从我的api顺序获取数据，并将其添加到dataSource数组。如果我将表嵌套在ngFor中，那么该循环思想dataSource数组将无法使用该表的排序和分页。

我尝试分别添加每个表，并且效果很好，但是需要很多代码，我需要知道数据库中有多少个数据表。

TS：

displayedColumns: string[] = ['Price', 'Quantity'];
dataSource = new Array<MatTableDataSource<OrderData>>();
nameSource = new Array<String>();
@ViewChildren(MatPaginator) paginator = new QueryList<MatPaginator>();
@ViewChildren(MatSort) sort = new QueryList<MatSort>();
constructor(private ob: OrderBookService) {
}
ngOnInit() {
}
ngAfterViewInit(): void {
    this.loadData();
}
loadData(): void {
this.ob.getOrderBook(1).subscribe(ret => {
if (ret === null) { return; }
    this.nameSource[0] = ret[0].name;
    this.dataSource[0] = new MatTableDataSource(ret[0].data.Asks);
    this.dataSource[0].sort = this.sort.toArray()[0];
    this.dataSource[0].paginator = this.paginator.toArray()[0];
    this.nameSource[1] = ret[1].name;
    this.dataSource[1] = new MatTableDataSource(ret[1].data.Asks);
    this.dataSource[1].sort = this.sort.toArray()[1];
    this.dataSource[1].paginator = this.paginator.toArray()[1];
    this.nameSource[2] = ret[2].name;
    this.dataSource[2] = new MatTableDataSource(ret[2].data.Asks);
    this.dataSource[2].sort = this.sort.toArray()[2];
    this.dataSource[2].paginator = this.paginator.toArray()[2];
});

HTML：

<div class="data">
    <table  mat-table [dataSource]="dataSource[0]" matSort class="mat-        elevation-z8" matSortDisableClear matSortActive="Price" matSortDirection="asc">
        <ng-container matColumnDef="Price">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Price </th>
            <td mat-cell *matCellDef="let element"> {{element.Price | currency:'USD' :'symbol':'.3-3'}} </td>
        </ng-container>
        <ng-container matColumnDef="Quantity">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Quantity </th>
            <td mat-cell *matCellDef="let element"> {{element.Quantity}} </td>
        </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected]="row == selected.get(1*1)"
(click)="push(row, 1)"></tr>
</table> 
    <table  mat-table [dataSource]="dataSource[1]" matSort class="mat-        elevation-z8" matSortDisableClear matSortActive="Price" matSortDirection="asc">
        <ng-container matColumnDef="Price">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Price </th>
            <td mat-cell *matCellDef="let element"> {{element.Price | currency:'USD' :'symbol':'.3-3'}} </td>
        </ng-container>
        <ng-container matColumnDef="Quantity">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Quantity </th>
            <td mat-cell *matCellDef="let element"> {{element.Quantity}} </td>
        </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected]="row == selected.get(1*1)"
(click)="push(row, 1)"></tr>
</table>
    <table  mat-table [dataSource]="dataSource[2]" matSort class="mat-        elevation-z8" matSortDisableClear matSortActive="Price" matSortDirection="asc">
        <ng-container matColumnDef="Price">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Price </th>
            <td mat-cell *matCellDef="let element"> {{element.Price | currency:'USD' :'symbol':'.3-3'}} </td>
        </ng-container>
        <ng-container matColumnDef="Quantity">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Quantity </th>
            <td mat-cell *matCellDef="let element"> {{element.Quantity}} </td>
        </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.selected]="row == selected.get(1*1)"
(click)="push(row, 1)"></tr>
</table>
</div>

我想使用ngFor来不重复代码。

使用ngFor时，Angular Material分页器和排序不适用于多个表

0 个答案: