ngx-datatable 在 [rows]="rows | async" 的情况下无法重新分配行模型

Question

我正在使用 Angular 2 (4.1.0)、angularfire2 和 ngx-datatable。

我有一个带有数据的组件table，它正在渲染一个 Observable。 Observable 基于 Angularfire2。用户可以在名称列上进行过滤，就像在 ngx-datatable 过滤器演示中一样实现。我在 firebase 中查询新的结果集，并尝试将新的 Observable 分配给数据的行模型table，但这不起作用：

ERROR TypeError: Cannot read property '0' of null
    at DataTableBodyComponent../src/components/body/body.component.ts.DataTableBodyComponent.updateRows (index.js:4384)
    at DataTableBodyComponent../src/components/body/body.component.ts.DataTableBodyComponent.recalcLayout (index.js:4599)
    at DataTableBodyComponent.set [as rows] (index.js:4185)
    at updateProp (core.es5.js:10966)
    at checkAndUpdateDirectiveDynamic (core.es5.js:10726)
    at checkAndUpdateNodeDynamic (core.es5.js:12111)
    at checkAndUpdateNode (core.es5.js:12055)
    at debugCheckAndUpdateNode (core.es5.js:12681)
    at debugCheckDirectivesFn (core.es5.js:12622)
    at Object.eval [as updateDirectives] (DatatableComponent.html:24)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12607)
    at checkAndUpdateView (core.es5.js:12019)
    at callViewAction (core.es5.js:12334)
    at execComponentViewsAction (core.es5.js:12280)
    at checkAndUpdateView (core.es5.js:12025)

预期行为：

过滤并获得新的 Observable 后，我希望数据table 呈现新的 Observable。

以下是最重要的代码片段：

HTML, Datatable (我用的是 [rows]="rows | async" !) :

...
<ngx-datatable #table [rows]="rows | async" 
 [columnMode]="'flex'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'"
 [limit]="10" class="material striped" [selected]="selected" [selectionType]="'single'"
 (select)='onSelect($event)'>
...

组件：

@Input()
  set onFilteringList (filter: string) {
    this._onFilteringList = filter;
    // assignment after the table has been rendered throws error!
    this.rows = this.workItemSrv.getFilteredByUserWorkItemList(this.onFilteringList);
  }
ngOnInit() { // OK, everything worked fine here 
    if (this.onFilteringList) {
      this.rows = this.workItemSrv.getFilteredByUserWorkItemList(this.onFilteringList);
    } else {
      this.rows = this.workItemSrv.getWorkItemList();
    }
  }

我尝试了三种不同的方式来显示过滤后的结果集：

路由：使用路由参数（作为过滤器参数）看起来很有希望，但组件不会在每次导航时重新初始化。在初始路由、组件初始化和渲染 table 之后，我得到了一个如上所述的错误（请参阅代码片段）。
使用 firebase 查询方法，但无法使用参数定义查询，以便检索所有项目或筛选所有项目的子集。使用一个应用了过滤器的 Observable 和另一个没有过滤器的 Observable 可能是一个解决方案，但我需要交换数据 table 上的行模型。这会导致如上所述的错误。
使用 rxjs 过滤器方法，但我没有找到在 Observable 上成功应用过滤器的解决方案

None 这些给了我一个解决方案。 :-(

如何更改数据的行模型 table 或对 Observable 进行过滤？

谢谢，马库斯

Answer 1

您可以尽量避免使用异步数据模型：

...
<ngx-datatable #table [rows]="rows" 
...

组件变化：

@Input()
set onFilteringList (filter: string) {
  this._onFilteringList = filter;
  this.workItemSrv.getFilteredByUserWorkItemList(this.onFilteringList)
    .subscribe(rows => this.rows = rows);
}

ngOnInit() { 
  if (this.onFilteringList) {
    this.rows = 
    this.workItemSrv.getFilteredByUserWorkItemList(this.onFilteringList)
       .subscribe(rows => this.rows = rows);
  } else {
    this.rows = this.workItemSrv.getWorkItemList()
      .subscribe(rows => this.rows = rows);
  }
}

ngx-datatable 在 [rows]="rows | async" 的情况下无法重新分配行模型

ngx-datatable Can't reassign the row model in case of [rows]="rows | async"

rxjs

typescript

angularfire2

ngx-datatable

angular