Сортировать компонент списка в Angular

Question

Я пытаюсь отсортировать свой список компонентов, которые я создал, с угловым материалом.

<div style="width:30%;">
        <mat-nav-list matSort (matSortChange)="sortData($event)">
            <th mat-sort-header="stuff.name">Name</th>
            <mat-list-item *ngFor="let stuff of vehicleDetails">
                <button matLine (click)="updateInfo(stuff.id)"> {{ stuff.name }} </button>
                <button mat-icon-button id="btn" *ngIf='check(stuff.alarm)' matTooltip="{{stuff.alarm[tooltipIndex(stuff)]?.timestamp}} - {{stuff.alarm[tooltipIndex(stuff)]?.description}}">
                    <mat-icon>info</mat-icon>
                </button>
            </mat-list-item>
        </mat-nav-list>
    </div>

Данные, отображаемые в списке, представляют собой набор названий транспортных средств. Это происходит из моего vehicleDetails, который представляет собой массив типа VehicleDetail, содержащий такие свойства, как имя, идентификатор и т. Д. Сейчас я пытаюсь отсортировать по имени. Я использую следующие функции при попытке достичь этой функциональности:

 export class VehiclelistComponent implements OnInit, AfterViewChecked
 {

vehicleDetails: VehicleDetail[] = [];
sortedVehicleDetails: VehicleDetail[];

sortData(sort: Sort) {
    const data = this.vehicleDetails.slice();
    if (!sort.active || sort.direction === '') {
      this.sortedVehicleDetails = data;
      return;
    }
    this.sortedVehicleDetails = data.sort((a, b) => {
      const isAsc = sort.direction === 'asc';
      switch (sort.active) {
        case 'name':
          return this.compare(a.name, b.name, isAsc);
        default:
          return 0;
      }
    });
  }

  compare(a, b, isAsc) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }

Мои ngOnInit и ngAfterViewChecked выглядят так

ngOnInit() {
    // Init vehicles
    this.getVehicleDetails();

   }

  ngAfterViewChecked() {
    this.sortedVehicleDetails = this.vehicleDetails.slice();
  }

Как мне решить мою проблему, чтобы я мог сортировать по имени или любым другим свойствам?

Answer 1

Вам также необходимо получить свойство, по которому нужно отсортировать массив объектов.

Примерно так

  sort(value: any[], criteria: SortCriteria): any[] {        
    if (!value || !criteria)
      return value;

    let p: string = criteria.property;

    let sortFn:(a: any, b: any) => any = (a, b) => {
      let value: number = 0;
      if (a[p] === undefined) value = -1;
      else if (b[p] === undefined) value = 1;
      else value = a[p] > b[p] ? 1 : (b[p] > a[p] ? -1 : 0);
      return criteria.descending ? (value * -1) : value;
    };

    value.sort(sortFn);
    return value;
  }

Где SortCriteria,

interface SortCriteria {
  property: string;
  descending?: boolean;
}

Вы также можете создать канал, чтобы использовать его непосредственно в шаблоне

Stackblitz