Question

我有一个带有标题的列表，当用户单击标题时，它调用排序函数对标题下的行进行排序（在升序和降序之间切换）。

用户可以选择按位置过滤结果，这是通过使用带有select选项值的自定义过滤器管道完成的。但是，当应用过滤器时，我相信它会用结果“掩盖”原始数组，并且用户无法进行排序。

我不想创建自定义排序管道，因为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;
      }
    });
  }
}

角度-使用过滤器后排序

0 个答案: