Ъглова таблица с материали със сортиране и пагинатор

Използвам таблица с ъглови материали в моя проект. Данните за таблицата ще бъдат преминати от родителски компонент чрез Input. Това работи добре. Също така искам да добавя пагинатор към моята таблица и една колона трябва да може да се сортира. Но когато задавам сортирането и пагинатора, получавам грешката "....не мога да задам .sort of undefined".

<div id="table-overflow">
    <mat-table [dataSource]="dataSourceLog" class="mat-elevation-z8" matSort matSortDisableClear>
        <ng-container matColumnDef="actionTS">
            <mat-header-cell *matHeaderCellDef mat-sort-header>TimeStamp</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.actionTSFormated}} </mat-cell>
        </ng-container>
        /* some more columns*/
        <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
</div>
<mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>

.ts файл

export class ProtocolLogTable implements OnInit{
    @Input() dataSourceLog: MatTableDataSource<DataLog>;
    timestampFrom: string;
    timestampTo: string;

    displayedColumns: string[] = ['actionTS' /* some more columns */];

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

    ngOnInit() {
        this.dataSourceLog.sort = this.sort;
        this.dataSourceLog.paginator = this.paginator;
    }
}

angular angular-material paginator
person WeSt    schedule 02.12.2018    source източник
comment
ако можете да опитате да използвате грундиране за маси - това дава много повече мощност   -  person yehonatan yehezkel    schedule 02.12.2018

Отговори (1)


arrow_upward
1
arrow_downward

Вероятно не получавате данни веднага след създаването на компонента. Опитайте да преместите кода си от ngOnInit към @Input сетер по този начин

public dataSourceLogValue: MatTableDataSource<DataLog>;

@Input()
public set dataSourceLog(value: MatTableDataSource<DataLog>) {
  if (value) {
    this.dataSourceLogValue = value;
  }
}

И се уверете, че сте преименували dataSourceLog на dataSourceLogValue в шаблона.

person epsilon    schedule 02.12.2018
comment
Работи като чар. Благодаря - person WeSt; 02.12.2018