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>


Ответы (0 шт):