Angular material table
Создаю MatTableDataSource таблицу, беру данные с json-server, фильтрация работает, сортировка - нет. Вижу проблему в функции getData, тк она возвращает промис, а не значение. Может есть какой-то способ исправить данную ситуацию?
user-list.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { Muser } from 'src/app/shared/models/muser.model';
import { MusersService } from 'src/app/shared/services/musers.service';
import { isNullOrUndefined } from 'util';
import { Router } from '@angular/router';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
@Component({
selector: 'app-user-list',
templateUrl: './user-list.component.html',
styleUrls: ['./user-list.component.css'],
})
export class UserListComponent implements OnInit {
users: Muser[];
userData = new MatTableDataSource();
displayedColumns = ['#', 'Name', 'Surname', 'Age', 'Type','Actions']
searchName = "";
//sortedData: Muser[];
constructor(private musersService: MusersService, private router: Router) {}
ngAfterViewInit (){
}
@ViewChild(MatSort, {static: false}) set setSort(sort: MatSort){
this.userData.sort = sort;
}
ngOnInit(): void {
this.getData();
}
async getData() {
try {
let users = this.musersService.getAll();
this.users = isNullOrUndefined(await users) ? [] : await users;
this.userData = new MatTableDataSource(this.users);
// this.userData.sort = this.sort;
return(await this.userData)
} catch (err) {
console.error(err);
}
}
onLinkProfile(id: number) {
this.router.navigate([this.router.url, 'profile', id]);
}
onAddProfile() {
this.router.navigate([this.router.url, 'profile']);
}
async onDelete(user) {
try {
console.log(user)
await this.musersService.deleteOneById(user.id);
} catch (err) {
console.error(err);
} finally {
this.getData();
}
}
applyFilter(filterValue: string) {
this.userData.filter = filterValue.trim().toLowerCase();
}
}
user-list.component.html
<div class="container-fluid">
<div class="row">
<div class="col">
<h4>Фильтр</h4>
<input matInput (keyup)="applyFilter($event.target.value)"placeholder="Введите Данные"/>
</div>
</div>
<mat-table [dataSource]="userData" matSort>
<ng-container matColumnDef="#">
<mat-header-cell *matHeaderCellDef mat-sort-header >#</mat-header-cell>
<mat-cell *matCellDef="let user "> {{user.id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Name">
<mat-header-cell mat-sort-header *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *matCellDef="let user "> {{user.name}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Surname">
<mat-header-cell *matHeaderCellDef mat-sort-header>Surname</mat-header-cell>
<mat-cell *matCellDef="let user "> {{user.surname}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Age">
<mat-header-cell mat-sort-header *matHeaderCellDef>Age</mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.years}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Type">
<mat-header-cell *matHeaderCellDef mat-sort-header>Type</mat-header-cell>
<mat-cell *matCellDef="let user"> {{user.type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="Actions">
<mat-header-cell *matHeaderCellDef >
<button mat-button class="btn btn-primary" (click)="onAddProfile()" style="width:230px;">
Добавить пользователя
</button> </mat-header-cell>
<mat-cell *matCellDef="let user of users">
<button mat-button class="btn btn-primary" (click)="onLinkProfile(user.id)">
Редактировать
</button>
<button mat-button class="btn btn-danger" *ngIf="user.id != null" (click)="onDelete(user)">
Удалить
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef = "displayedColumns" color="primary"> </mat-header-row>
<mat-row *matRowDef ="let row;columns:displayedColumns"> </mat-row>
</mat-table>
</div>