Мне нужно отсортировать таблицу, но MatTableDataSource не работает ...
Я не могу понять, как передать массив в MatTableDataSource
Мне нужны данные в таблице для отображения и сортировки
//This is Component.ts
export class TestSortTableComponent implements OnInit {
displayedColumns = ['fullName', 'birthDate', 'phone', 'email', 'skype',
'position', 'startDate', 'endDate', 'action'];
data: UserDataSource ;
dataSource = new MatTableDataSource(this.data);
@ViewChild(MatSort) sort: MatSort;
constructor(
private userService: UserService,
private activatedRoute: ActivatedRoute,
private tableQueryParams: TableQueryParamsService,
private httpService: UserService,
private router: Router
) {}
ngOnInit() {
this.data = new UserDataSource(this.userService, this.activatedRoute);
}
}
//this is html:
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-
z8">
<ng-container matColumnDef="fullName">
<mat-header-cell *matHeaderCellDef >Full name</mat-header-cell>
<mat-cell *matCellDef="let user">{{ user.fullName }}</mat-cell>
</ng-container>
<ng-container matColumnDef="birthDate">
<mat-header-cell *matHeaderCellDef mat-sort-header>Birthday</mat-header-
cell>
<mat-cell *matCellDef="let user">{{ user.birthDate | date }}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-header-row *matRowDef="let row; columns: displayedColumns"></mat-
header-row>
</table>
//this is UserDataSource.ts:
export class UserDataSource implements DataSource<UserModel> {
[x: string]: any;
public usersSubject = new BehaviorSubject<PagedContentModel>({
items: [],
total: 0
});
private queryParamsSubscriber: Subscription;
paginator: any;
sort: any;
constructor(
private userService: UserService,
private activatedRoute: ActivatedRoute,
) { }
public connect(collectionViewer: CollectionViewer):
Observable<UserModel[]> {
this.queryParamsSubscriber =
this.activatedRoute.queryParamMap.subscribe((paramMap) => {
this.loadUsers(
+paramMap.get('page'),
paramMap.get('sortBy'),
paramMap.get('sortOrder'),
paramMap.get('gender'),
paramMap.get('startDate'),
paramMap.get('endDate'),
paramMap.get('keyWord'),
);
});
return this.usersSubject.asObservable()
.pipe(
map((response) => response.items)
);
}
disconnect(collectionViewer: CollectionViewer) {
this.queryParamsSubscriber.unsubscribe();
this.usersSubject.complete();
}
getTotalObservable(): Observable<number> {
return this.usersSubject.asObservable()
.pipe(
map((response) => response.total)
);
}
private loadUsers(page = 0, sortBy = '', sortOrder = 'asc', gender,
startDate, endDate,keyWord) {
const f = {
gender,
startDate,
endDate,
keyWord
};
this.userService.getUsers(page, sortBy, sortOrder,
f).subscribe((response) => {
this.usersSubject.next(response);
});
}
}
//this is getUsers method:
getUsers(page = 0, sortBy = '', sortOrder = 'asc', filter):
Observable<any> {
let params: HttpParams = new HttpParams()
.set('page', page ? page.toString() : '0')
.set('sortBy', sortBy || '')
.set('sortOrder', sortOrder || '');
if (filter) {
for (let key in filter) {
let value = filter[key];
if(value){
params = params.set(key, value);
}
}
}
return this.http.get(`${environment.apiBaseUrl}/employees`, { params });
}
Проблема в том, что я не могу передать нужный список в MatTableDataSource и из-за этого сортировка не работает.
В официальной документации Angular Material Все выглядит очень просто, но я столкнулся с неизвестными проблемами, которые, скорее всего, вызваны UserDataSource.