使用ngx-datatables排序时出现rxjs_1.fromEvent is not a function错误

我之前也碰到过类似的问题，这个错误大概率和RxJS版本兼容或者数据的处理方式有关，给你几个可行的解决方案：

1. 排查RxJS版本兼容性问题 #

这个错误最常见的原因是RxJS版本不匹配：ngx-datatable内部使用了fromEvent，如果你的项目用的是RxJS 6+，但使用的ngx-datatable版本较旧，它可能还是用RxJS 5的导入方式（比如import fromEvent from 'rxjs/observable/fromEvent'），这在RxJS 6+里会找不到这个函数。

解决办法： #

• 升级ngx-datatable到最新版本，确保它支持RxJS 6+：

npm install @swimlane/ngx-datatable --save

• 如果暂时不想升级，可以安装rxjs-compat兼容包，让旧的RxJS导入方式在6+版本里生效：

npm install rxjs-compat --save

2. 调整Observable数据的处理方式 #

虽然async管道能帮你订阅Observable，但ngx-datatable在排序时需要直接操作数据数组，而async管道绑定的数据流组件无法直接干预。建议你手动订阅Firestore的Observable，把数据存到组件的数组变量中，再绑定到表格，同时手动处理排序事件。

组件代码示例： #

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  columns = [
    {name: 'ID', prop: 'id'},
    {name: 'Street Address', prop: 'address.street'},
    {name: 'Suburb', prop: 'address.suburb'},
    {name: 'State', prop: 'address.state'},
    {name: 'Manager Name', prop: 'manager.name'},
    {name: 'Manager Company', prop: 'manager.company'},
  ];
  
  rows: any[] = []; // 存储订阅后的实际数据

  constructor(private firestore: AngularFirestore) { }

  ngOnInit(): void {
    // 订阅Firestore数据
    this.firestore.collection('your-collection').valueChanges()
      .subscribe(data => {
        this.rows = data;
      });
  }

  // 处理表格排序事件
  onSort(event: any) {
    const sortConfig = event.sorts[0];
    // 手动实现嵌套属性排序
    this.rows.sort((a, b) => {
      const valueA = this.getNestedProperty(a, sortConfig.prop);
      const valueB = this.getNestedProperty(b, sortConfig.prop);
      
      if (sortConfig.dir === 'asc') {
        return valueA > valueB ? 1 : -1;
      } else {
        return valueA < valueB ? 1 : -1;
      }
    });
  }

  // 辅助函数：获取嵌套属性值
  private getNestedProperty(obj: any, path: string): any {
    return path.split('.').reduce((current, key) => current?.[key], obj);
  }
}

模板代码调整： #

<ngx-datatable #table class='material striped' 
  [columns]="columns" 
  [rows]="rows" 
  [footerHeight]="25"
  (sort)="onSort($event)"> <!-- 绑定排序事件 -->
</ngx-datatable>

3. 可选：Firestore端排序（如果需要服务端排序） #

如果你的数据量很大，不想在客户端排序，可以在排序事件里重新请求Firestore数据，注意Firestore不支持直接用嵌套属性（比如address.street）排序，需要提前在Firestore中创建对应的字段或者用映射：

onSort(event: any) {
  const sortConfig = event.sorts[0];
  // 注意：Firestore不支持嵌套属性排序，这里需要替换成你在Firestore中定义的平级字段
  const firestoreSortField = sortConfig.prop.replace('.', '_'); 
  
  // 重新请求排序后的数据
  this.firestore.collection('your-collection', ref => 
    ref.orderBy(firestoreSortField, sortConfig.dir)
  ).valueChanges().subscribe(data => {
    this.rows = data;
  });
}

内容的提问来源于stack exchange，提问作者Subhan