Angular Material 个具有多个数据源的表

Question

我有这个 table 用于多个数据。

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

排序只显示箭头，不排序

Paginator 不会对项目进行计数并将显示“0 个中的 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()

Angular Material 个具有多个数据源的表

Angular Material tables with multiple data sources

angular

mat-table