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、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();
    }
  }

フィルター処理された結果セットを表示する 3 つの異なる方法を試しました。

  1. ルーティング: ルート パラメーターを (フィルター パラメーターとして) 使用することは有望に見えますが、ナビゲーションごとにコンポーネントが再初期化されるわけではありません。最初のルーティング、コンポーネントの初期化、およびテーブルのレンダリングの後、上記で説明したようなエラーが発生します (コード スニペットを参照してください)。

  2. firebase クエリ メソッドを使用しますが、すべてのアイテムを取得するか、すべてのアイテムのフィルター処理されたサブセットを取得するようにパラメーターを使用してクエリを定義する方法はありません。フィルターが適用された Observable と、フィルターが適用されていない 2 番目の Observable を使用することが解決策になる可能性がありますが、データテーブルの行モデルを交換する必要があります。そして、これは上記のようにエラーになります。

  3. rxjsフィルターメソッドを使用していますが、Observableにフィルターを正常に適用するソリューションが見つかりませんでした

これらのどれも私に解決策を与えません。:-(

データ テーブルの行モデルを変更するか、Observable をフィルタリングするにはどうすればよいですか?

ありがとう、マーカス

4

1 に答える 1