具有多个数据源的 Angular Material 表

Question

我有这张表，用于多个数据。

我的问题是数据显示正确，但分页器和排序不起作用。

排序只显示箭头，但不会排序

分页器不会计算项目并显示“0 of 0”

这是我的代码:component.html

<mat-table class="lmat-elevation-z8" [dataSource]="dataSources[pagePart]" matSort>
    <ng-container *ngFor="let column of columns[pagePart]" [matColumnDef]="column.columnDef">
        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</mat-header-cell>
        <mat-cell *matCellDef="let row">{{ row[column.columnDef] }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="azioni">
        <mat-header-cell *matHeaderCellDef>Azioni</mat-header-cell>
        <mat-cell *matCellDef="let row">
            <button>... here there's a list of action buttons for each row ...</button>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns[pagePart].concat('azioni'); sticky:true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns[pagePart].concat('azioni')"></mat-row>
</mat-table>

我加载数据的代码是:component.ts

displayedColumns={};
columns={};
dataSources={};

@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

loadPart(part){
    this.http.get("myapi").subscribe(data=>{
        // load data
        var datas=[];
        for(var k=0; k<data["length"]; ++k){
            datas.push(data[k]);
        }
        // setup columns
        this.columns[part]=[];
        this.displayedColumns[part]=[];
        if(data["length"]>0) // setup column names, headers and everything
        for(var key in data[0]){
            if(key.indexOf("id")>=0) continue;
            this.displayedColumns[part].push(key);
            this.columns[part].push({
                columnDef: key,
                header: this.renameHeader(key) // rename header based on the name provided by the api
            });
        }
        // setup table
        this.dataSources[part]=new MatTableDataSource(datas);
        // load all the possible shit
        this.dataSources[part].sort = this.sort;
        this.dataSources[part].paginator = this.paginator;
        // apply changes
        this.data_loaded[part]=true;
        this.cdr.detectChanges();
    });
}

关于如何使分页器和排序工作的任何想法？

Answer 1

好的，原来问题出在@ViewChild 声明中。
在我的组件初始化中，我有:

@Component({
    selector: 'm-profile',
    templateUrl: './profile.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush
})

然后需要 ChangeDetectorRef.detectChanges()为了更新DOM
这会阻止 ViewChild 分配正确的引用，因此一旦我需要的 ViewChild 实际可见(一开始它们被包裹在 *ngIF 中)我只需重新分配 dataSource.paginator=this.paginator然后重新 detectChanges()