Я пытаюсь реализовать MatTableDataSource в Angular 7, я придерживаюсь указания Angular Material , но кажется, что он не работает, и я получаю `
Невозможно прочитать свойство 'data' из неопределенного
`. При печати в консоли данные связываются и отображаются результаты, но они не привязаны к моей таблице.
HTML
<div class="mat-elevation-z8 full-width-table" *ngIf="brList">
<table class="full-width-table" mat-table [dataSource]="brList" matSort aria-label="Elements">
<!-- Id Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
<td mat-cell *matCellDef="let row">{{row.id}}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">{{row.name}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #paginator
[length]="dataSource.data.length"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[10, 15, 20, 25]">
</mat-paginator>
</div>
Модель
export interface Br {
id: number;
name: string;
}
Компонент
export class ListBComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
brList: MatTableDataSource<Br> = new MatTableDataSource<Br>();
displayedColumns = ['id', 'name'];
constructor(private mm: BrService){
}
ngOnInit() {
this.mm.getMM().subscribe(
result =>
{
this.brList.data = result;
this.brList.paginator = this.paginator;
this.brList.sort = this.sort;
console.log(this.brList); //prints the data correctly
})
}