Question

我正在使用Angular 2（4.1.0），angularfire2和ngx-datatable。

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

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后，我希望数据表呈现新的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();
    }
  }

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

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

这些都没有给我一个解决方案。： - （

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

谢谢Markus

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”，则无法重新分配行模型

1 个答案: