角表与来自Firebase的数据无法排序？

问题描述

我已完成创建排序函数及其伪指令，如下所示：

pg_archivecleanup

但是我的html无法调用排序函数，因为它没有在控制台上返回日志，我的html出问题了吗？这是我的html表格的样子：

export type SortDirection = 'asc' | 'desc' | '';
const rotate: { [key: string]: SortDirection } = { 'asc': 'desc','desc': '','': 'asc' };
export const compare = (v1,v2) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;

export interface SortEvent {
  column: string;
  direction: SortDirection;
}

@Directive({
  selector: 'th[sortable]',host: {
    '[class.asc]': 'direction === "asc"','[class.desc]': 'direction === "desc"','(click)': 'rotate()'
  }
})

export class NgbdSortableHeader {
  
  @input() sortable: string;
  @input() direction: SortDirection = '';
  @Output() sort = new EventEmitter<SortEvent>();

  rotate() {
    console.log('Rotate');
    this.direction = rotate[this.direction];
    this.sort.emit({ column: this.sortable,direction: this.direction });
  }
}

export class ListCustomersComponent implements OnInit { 
  filterCustomers: Customers[] = [];
  sortCustomers: Customers[] = [];

//Sort purpose
@ViewChildren(NgbdSortableHeader) headers: QueryList<NgbdSortableHeader>;

  async getCustomers(token) {
    this.clearMessages();
    this.customeRSService.getCustomers(token).subscribe(result => {
      this.customers = result.filter(x => x.active); // display active customers only
      this.filterCustomers = this.customers;
      this.sortCustomers = this.customers;
      this.totalLengthOfCollection = this.filterCustomers.length;
      this.loadPage = true;
    },err => {
      this.alert.code = err.error.error;
      if (this.alert.code == undefined) {
        this.alert.code = err.statusText;
        this.alert.message = 'Unexpected error encountered.';
        this.alert.status = 'Failed';
        console.log(err);
      } else if (this.alert.code == "Unauthorized") {
        this.customeRSService.denyAccess();
      } else {
        this.alert.message = err.error.message;
        this.alert.status = 'Failed';
      }
    });
  }

//Sort function
  public onSort({ column,direction }: SortEvent) {
    this.headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
        console.log("hello hello");
      }
    });

    if (direction === '') {
      this.filterCustomers = this.customers;
      this.sortCustomers = this.customers;
      console.log("hello hello hello");
    } else {
      this.sortCustomers = [].sort((a,b) => {
        const res = compare(a[column],b[column]);
        return direction === 'asc' ? res : -res;
      });
      this.filterCustomers = [].sort((a,b[column]);
        return direction === 'asc' ? res : -res;
      });
    }
    
  }
}

我认为我需要在处更正ngFor，但是我不确定如何同时调用 filterCustomers 和 sortCustomers 。它正在显示客户列表，但未对其进行排序。如果我将ngFor放在th，则标题变成三倍

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）