Angular - сортировка после использования фильтра - PullRequest
Новая
       14

Angular - сортировка после использования фильтра

0 голосов
/ 08 апреля 2020

У меня есть список с заголовками, который, когда пользователь нажимает на заголовок, вызывает функцию сортировки для сортировки (переключения по возрастанию и убыванию) строк ниже этого заголовка.

У пользователя есть возможность отфильтровать результаты по местоположению, что выполняется с помощью пользовательского канала фильтра, который принимает значение параметра выбора. Однако, когда фильтр применяется, я считаю, что он «маскирует» исходный массив с результатами, и пользователь не может отсортировать.

Я не хочу создавать пользовательский канал сортировки, потому что Angular советует не делать этого.

Мой вопрос: как добавить возможность сортировать отфильтрованные результаты из конвейера?

Машинопись: 

storeData = [
  {location: "Los Angeles", store: "1605", numberOfEmployees: 25},
  {location: "San Diego", store: "1705", numberOfEmployees: 38},
  {location: "New York City, store: "1505", numberOfEmployees: 29},
  {location: "Tucson", store: "1405", numberOfEmployees: 22}
];

sortBy(header) { return this.storeData.sort(/*sorting function here*/) }

HTML: 

<!-- Dropdown -->
<select [(ngModel)]="selectedLocation">
<option *ngFor="let location of locations" [value]="location"></select>

<!-- List-->
<div id="headers">
  <span (click)="sortBy('location')">Location</span>
  <span(click)="sortBy('storeNo')">Store Number</span>
  <span (click)="sortBy('employeeNo')">No. of Employees</span>
</div>
<div id="list">
  <ul *ngFor="let data of storeData | locationFilter:selectedLocation>
    <li>
      <span>{{ data.location }}</span>
      <span>{{ data.storeNumber }}</span>
      <span>{{ data.numberOfEmployees }}</span>
      <span class=" bsc-data percent-bar">
    </li>
  </ul>
</div>

Труба: 

export class LocationPipe implements PipeTransform {

  transform(stores: Array<any>, value: string): any {
    if (value === undefined || value == null) {
      return stores;
    }
    return stores.filter((store) => {
      if (value === gateway.location) {
        return store;
      }
    });
  }
}
...