Как создать мат-таблицу с сортировкой по данным, полученным из HttpClient (Angular)

Question

Я новичок в angular, и мне трудно понять, как я могу отображать данные, полученные из HTTP-запроса, в отсортированной таблице матов. В настоящее время то, что я делаю, находится в моем app.component.ts. У меня есть метод getdata:

  getdata() {  
    this.ServiceService.getData().subscribe((data: any[]) => {  
      this.data = data;  
    })  
  }

это метод, который он вызывает из ServiceService (простой вызов API)

getData(){
  return this.http.get('/api/Employee');
}

и в моем app.component у меня есть:

  constructor(private ServiceService: ServiceService) { }  
  data: any;  
  EmpForm: FormGroup;  
  submitted = false;   
  EventValue: any = "Save";  
  
  ngOnInit(): void {  
    this.getdata();  
  
    this.EmpForm = new FormGroup({  
      eId: new FormControl(null),  
      eName: new FormControl("",[Validators.required]),        
      eAddress: new FormControl("",[Validators.required]),  
      eEmail:new FormControl("",[Validators.required]),  
      eAge: new FormControl("",[Validators.required]),  
    })    
  }

Затем в моем app.component. html Я просто делаю это

<div class="row">
      <table class="table table-striped">
          <tr>
              <td>Id</td>
              <td>Name</td>

              <td>Address</td>
              <td>Email</td>
              <td>Age</td>
              <td>Edit</td>
              <td>Delete</td>
          </tr>

          <tr *ngFor="let d of data">
              <td>{{d.eId}}</td>
              <td>{{d.eName}}</td>

              <td>{{d.eAddress}}</td>
              <td>{{d.eEmail}}</td>
              <td>{{d.eAge}}</td>
              <td><a (click)="EditData(d)" class="btn btn-warning">Edit</a></td>
              <td><a (click)="deleteData(d.eId)" class="btn btn-danger">Delete</a></td>
          </tr>
      </table>

Это отлично работает, но у меня Я бился головой, пытаясь превратить мою обычную таблицу в таблицу матов с сортировкой, я не уверен, как я могу загрузить эти данные (* ngFor) в мою таблицу матов, если таблица матов - правильный выбор (я просто нужна сортировка). Любые советы приветствуются.

Answer 1

Да, вы можете использовать mat-table для своих данных.

Вы можете обратиться к этой ссылке: https://material.angular.io/components/table/examples (см. Пример таблицы данных с сортировкой, разбивкой на страницы и фильтрации.) и для привязки данных BE к таблице:

В вашем машинописном файле вам просто нужно создать переменную, например

  dataSource: MatTableDataSource<UserData>;

, а в вашей функции добавить вот так:

    getdata() {  
    this.ServiceService.getData().subscribe((data: any[]) => {  
      this.data = data;  
      this.dataSource.data = data;
    })  
  }