Question

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

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

排序仅显示箭头，但不排序

分页器不会计算项目，而是显示“ 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表

1 个答案: