Таблицы угловых материалов с несколькими источниками данных

Question

У меня есть эта таблица, которую я использую для нескольких данных.

Моя проблема заключается в том, что данные отображаются правильно, но разбивка на страницы и сортировка не работают.

Сортировка показывает толькострелки, но не сортируют

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();
    });
}

Любые идеи о том, как заставить paginator и сортировку работать?

Answer 1

Хорошо, оказывается, проблема была в объявлении @ViewChild.

В моем компоненте init у меня есть:

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

Для чего требуется ChangeDetectorRef.detectChanges(), чтобы обновитьDOM

Что не позволяет ViewChild назначать правильные ссылки, поэтому, когда нужный мне ViewChild действительно виден (вначале они заключены в *ngIF), я просто переназначаю dataSource.paginator=this.paginator, а затем сноваdetectChanges()