Почему matSort не работает с данными asyn c

Question

Я пытаюсь реализовать matSort для своей таблицы с данными asyn c, но это не работает, и я ищу решение. Я вижу кнопку, но она не работает. Пользователь вводит название страны во входных данных, а затем возвращает массив из API, который я поместил в таблицу.

angular / cli: 9.1.3 angular / material: 10.0.1

это мой код:

HTML

<form  class="example-form" [formGroup]="searchForm" (ngSubmit)="search()"  fxLayoutAlign="center center" >
    <mat-form-field class="example-full-width"  style="background-color: #fff; opacity: 0.9; margin-right: 20px;">
        <input #nameInput type="text"
                placeholder="Country"
                aria-label="Number"
                matInput
                formControlName="countryName"
                [matAutocomplete]="auto" >
                <mat-icon (click)="nameInput.value=''" matSuffix>clear</mat-icon>
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let country of filteredCountries | async" [value]="country">
            {{country}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
    <button mat-fab color="primary" aria-label="Example icon button with a delete icon" [disabled]="!searchForm.valid">
        <mat-icon>search</mat-icon>
    </button>
</form>
<div [hidden]="!isSearched" class="mat-elevation-z8" fxLayout="column" fxLayoutAlign="center center">

  <table mat-table [dataSource]="dataSource" matSort matSortActive="date" matSortDirection="desc">
  
    <ng-container matColumnDef="date">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
      <td mat-cell *matCellDef="let element"> {{element.Date |date:'shortDate'}} </td>
    </ng-container>
  
    <ng-container matColumnDef="confirmed">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Confirmed </th>
      <td mat-cell *matCellDef="let element"> {{element.Confirmed| number}} </td>
    </ng-container>

    <ng-container matColumnDef="active">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Active </th>
      <td mat-cell *matCellDef="let element"> {{element.Active| number}} </td>
    </ng-container>
  
    <ng-container matColumnDef="recovered">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Recovered </th>
      <td mat-cell *matCellDef="let element"> {{element.Recovered| number}} </td>
    </ng-container>

    <ng-container matColumnDef="deaths">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Deaths </th>
      <td mat-cell *matCellDef="let element"> {{element.Deaths| number}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  

  </table>
  
</div>
<mat-paginator [hidden]="!isSearched" #paginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>

TS:

export class CountryHistoryComponent implements OnInit {
  searchForm:FormGroup;
  filteredCountries: Observable<string[]>;
  countries=[];
  isSearched=false;
  displayedColumns: string[] = [ 'date', 'confirmed', 'active', 'recovered','deaths'];
  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: false}) sort: MatSort;
  dataSource: { data: any; paginator: MatPaginator; sort: MatSort; };
  
  constructor(private statsService:StatsService) { }

  ngOnInit(): void {
    this.statsService.getCountries();
    this.statsService.countries.subscribe(res=>{
      this.countries=res.map(country=>{
        return country['Country'];
      })
      this.countries.sort();
      console.log(this.countries);
    })
    this.searchForm=new FormGroup({
      countryName:new FormControl('',{validators:[Validators.required]})
    })
    this.filteredCountries = this.searchForm.controls['countryName'].valueChanges
      .pipe(
        startWith(''),
        map(value => this._filter(value))
      );

    
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.countries.filter(countryName => countryName.toLowerCase().includes(filterValue));
  }
  
  

  search(){
    console.log(this.searchForm.controls['countryName'].value);
    this.statsService.getTotalByCountry(this.searchForm.controls['countryName'].value);
    this.statsService.countryHistory.subscribe(res=>{
      this.isSearched=true;
      this.dataSource=new MatTableDataSource(res.reverse());
      //this.dataSource.data=res.reverse();
      this.paginator.firstPage();
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    })
  }

  


}

Answer 1

Я думаю, вам нужно только обработать результат сортировки. Например, вы можете поймать событие matSortChange, которое предоставит вам информацию. Он вернет вам значение активного столбца вашего displayedColumns и направление: asc или desc. Итак, обновите некоторые значения в вашем контроллере и воспроизведите запрос, используя их (обычно с использованием параметров запроса).

  <table mat-table [dataSource]="dataSource" (matSortChange)="sortChange($event)" matSort>

  sortChange(sortEvent: Sort): void {
    this.sortField = sortEvent.active;
    this.sortDirection = sortEvent.direction;
    this.getItems();
  }

Где getItems() может быть вашим методом получения данных с использованием параметров сортировки, например для например:

getItems() {
    this.itemsService.getItems(
      this.page, this.pageSize, this.sortField, this.sortDirection)
      .subscribe(
        data => {
          this.dataSource = new MatTableDataSource<Item>(data.data.items);
          this.length = data.data.total;
          this.queryDone = true;
        })
  }