当我应用过滤器时，为什么排序在表格上不起作用？

Question

我对表 header 的数据和排序有一个过滤器。 当我申请过滤器时，排序停止工作。 两者都单独工作，但一旦过滤应用排序停止工作。 需要的帮助。

表过滤器.pipe.ts

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "tableFilter"
})

export class TableFilterPipe implements PipeTransform {
  transform(list: any[], filters: any) {
    const keys = Object.keys(filters).filter(key => filters[key]);
    const filterUser = (user: { [x: string]: any; }) =>
      keys.every(key => {
        if (key == "sdob") {
          return new Date(user["dob"]) >= new Date(filters[key]);
        } else if (key == "edob") {
          return new Date(filters[key]) >= new Date(user["dob"]);
        } else {
          return user[key] === filters[key];
        }
      });
    return keys.length ? list.filter(filterUser) : list;
  }
}

app.component.ts

sort(property: any) {
    this.isDesc = !this.isDesc;
    this.column = property;
    let direction = this.isDesc ? 1 : -1;
    this.allUser.sort(function (a: { [x: string]: number; }, b: { [x: string]: number; }) {
      if (a[property] < b[property]) {
        return -1 * direction;        
      }
      else if (a[property] > b[property]) {
        return 1 * direction;
      }
      else {
        return 0;
      }
    });
  };

直播： https://angular-ivy-dubf37.stackblitz.io/

Answer 1

这是您的 TS 和生成的 DOM 之间的同步问题。

在您的sort function 中，您应该传递过滤后的用户（ filteredUsers ），因为这里的问题是即使在过滤后（ DOM 部分），它仍然对整个用户列表（业务逻辑部分）进行排序，这不是预期的行为：

(click)="sort('first_name', filteredUsers)">First Name</th>
(click)="sort('last_name', filteredUsers)">Last Name</th>

而在 TS 部分变成：

  sort(property: any, filteredUsers) {
    this.isDesc = !this.isDesc;
    this.column = property;
    let direction = this.isDesc ? 1 : -1;
    filteredUsers.sort(function(
      a: { [x: string]: number },
      b: { [x: string]: number }
    ) {
      if (a[property] < b[property]) {
        return -1 * direction;
      } else if (a[property] > b[property]) {
        return 1 * direction;
      } else {
        return 0;
      }
    });
  }

演示