У меня проблема с таблицей угловых материалов.Я не могу понять, почему это не работает. Плагин работает, нумерация страниц, я могу войти в консоль данных из http, но плагин не отображает строки.Данные для таблицы - это массив объектов, и он выглядит так же, как в угловом примере
.html
<mat-table #table [dataSource]="dataSource" class="" matSort matSortActive="name" matSortDisableClear matSortDirection="asc">
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Nazwa</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.name }}</mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef>Opis</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row.description }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [length]="resultsLength" [pageSize]="30">
</mat-paginator>
</div>
.ts
@Component({
selector: 'app-servicepointstablecomponent',
templateUrl: './servicepointstable.component.html'
})
@Injectable()
export class ServicepointstableComponent implements OnInit{
dataSource = new MatTableDataSource();
displayedColumns = ['name', 'description'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@Output() forDisplayRow = new EventEmitter<ServicePoint>();
resultsLength = 0;
isLoadingResults = true;
isRateLimitReached = false;
public selectedRow: ServicePoint;
constructor(private tableService: TableService) {
}
ngOnInit() {
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 1);
merge(this.sort.sortChange, this.paginator.page)
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.tableService!.getTableDataNew2<ServicePoint>(
this.sort.active, this.sort.direction, this.paginator.pageIndex);
}),
map(data => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
//this.resultsLength = data.total_count;
this.resultsLength = 100;
console.log(data);
return data.items;
}),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return observableOf([]);
})
).subscribe(data => this.dataSource.data = data);
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
}
onSelect(row: ServicePoint): void {
this.tableService.getRowNew<ServicePoint>(row.idServicePoint).subscribe(rr => {
this.selectedRow = rr; console.log(rr);
this.forDisplayRow.emit(rr);});
}
onDelete(row: ServicePoint): void {
console.log(`delete row ${row.description} ${row.name}`);
}
}