При использовании ngFor paginator и сортировка угловых материалов не работают с несколькими таблицами. - PullRequest
Новая
       40

При использовании ngFor paginator и сортировка угловых материалов не работают с несколькими таблицами.

0 голосов
/ 26 декабря 2018

Я пытаюсь показать несколько таблиц данных в одном компоненте.Я получаю данные по порядку из моего API и добавляю их в массив dataSource.Если я вложил таблицу в ng для этого зацикленного мысленного массива 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, чтобы не повторять код.

...