Угловая таблица материалов с сортировкой и пагинатором

В своем проекте я использую таблицу материалов Angular. Данные для таблицы будут переданы родительским компонентом через 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
если вы можете попробовать использовать Primeng для таблиц - это даст гораздо больше мощности   -  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