2

我正在使用 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，数据表（我正在使用 [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();
    }
  }

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

  1. 路由：使用路由参数（作为过滤器参数）看起来很有希望，但组件不会在每次导航时重新初始化。在初始路由、组件初始化和渲染表之后，我收到了一个如上所述的错误（请参阅代码片段）。

  2. 使用 firebase 查询方法，但无法使用参数定义查询，以便检索所有项目或过滤所有项目的子集。使用应用了过滤器的 Observable 和没有过滤器的第二个 Observable 可能是一个解决方案，但我需要交换数据表上的行模型。这会导致上述错误。

  3. 使用 rxjs 过滤器方法，但我没有找到在 Observable 上成功应用过滤器的解决方案

这些都没有给我一个解决方案。:-(

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

谢谢，马库斯

4

1 回答 1

0

您可以尝试避免使用异步数据模型：

...
<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);
  }
}
于 2017-05-18T20:53:46.003 回答