md-table FirebaseListObservableを持つDataSource

Question

FirebaseListObservableとBehaviorSubjectが入力フィルタをリスンしています。

今、両方の人をマージして、入力からの値でフィルタリングされた配列を返して、mdテーブルにフィードしたいと思います。

私はhttps://material.angular.io/components/table/examplesフィルタリングテーブルからexempleを得ました。

誰でも手伝ってもらえますか？ありがとうございました。

編集：

は、今では働いていますが、コンポーネントをロードするとき、私はエラーを取得しています。 入力フィールドに何かを書き終えたら、うまく動作します。

ERROR TypeError：ストリームが予期されていた場所で 'undefined'を指定しました。 Observable、Promise、Array、またはIterableを提供できます。

私は間違っていますか？

export class DataSourcePessoas extends DataSource<any> { 

    pessoas: FirebaseListObservable<any[]>; 

    _filterChange = new BehaviorSubject(''); 
    get filter(): string { return this._filterChange.value; } 
    set filter(filter: string) { this._filterChange.next(filter); } 

    dados: any[] = []; 

    constructor(private pessoasService: FirebasePessoasService) { 
    super(); 
    } 

    connect(): Observable<any> { 
    const displayDataChanges = [ 
     this.pessoas, 
     this._filterChange, 
    ]; 

    this.pessoas = this.pessoasService.BuscarPessoas(); 

    this.pessoas.subscribe(items => {console.log(items); this.dados = items}); 

    return Observable.merge(...displayDataChanges).map(() => { 
     return this.dados.filter(valor => { 
     return valor.nome.toLowerCase().indexOf(this.filter.toLowerCase()) !== -1})}); 

    } 

    disconnect() {} 
} 

Answer 1

私は質問への答えを提供していない観察可能

import {Component, ElementRef, ViewChild, OnInit} from '@angular/core'; 
import {DataSource} from '@angular/cdk'; 
import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 
import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/startWith'; 
import 'rxjs/add/observable/merge'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 
import 'rxjs/add/operator/distinctUntilChanged'; 
import 'rxjs/add/observable/fromEvent'; 

import { FirebaseListObservable } from 'angularfire2/database'; 
import { FirebasePessoasService } from './../../firebase/firebase-pessoas.service'; 


@Component({ 
    selector: 'app-pessoas', 
    templateUrl: './pessoas.component.html', 
    styleUrls: ['./pessoas.component.scss'] 
}) 
export class PessoasComponent implements OnInit { 
    displayedColumns = ['nome', 'nascimento', 'email', 'telefone']; 
    dataSource: DataSourcePessoas | null; 

    @ViewChild('filter') filter: ElementRef; 

    constructor(private pessoasService: FirebasePessoasService) { 
    } 

    ngOnInit() { 
    this.dataSource = new DataSourcePessoas(this.pessoasService); 
    this.dataSource.input = Observable.fromEvent(this.filter.nativeElement, 'keyup'); 

    } 

    public rowClick(row) { 
    console.log(row); // row click 
    } 
} 

export class DataSourcePessoas extends DataSource<any> { 

    pessoas: FirebaseListObservable<any[]>; 

    input: Observable<any>; 

    dados: any[] = []; 

    ultimoValor: string = ''; 

    constructor(private pessoasService: FirebasePessoasService) { 
    super(); 
    } 

    connect(): Observable<any> { 
    this.pessoas = this.pessoasService.BuscarPessoas(); 

    this.pessoas.subscribe(items => {this.dados = items}); 

    const aaa = this.pessoas.merge(this.input); 
    return aaa.map(x => { 
     if (x.constructor.name === 'Array') { 
     return x.filter(valor => { 
      return valor.nome.toLowerCase().indexOf(this.ultimoValor.toLowerCase()) !== -1}) 
     } else { 
     this.ultimoValor = x.target.value; 
     return this.dados.filter(valor => { 
      return valor.nome.toLowerCase().indexOf(x.target.value.toLowerCase()) !== -1}); 
     }}); 
    } 

    disconnect() {} 
} 

Answer 2

まあ、私はあなたが一つのことは、あなたがあなたのfirebaseListObservable内の任意のものを更新する場合は、ちょうどあなたのビューでそれをしませ反映するために、あなたのfirebaseListObservableを更新しようとしているので、もしそれが自動的にあなたのfirebaseデータベースを更新することを知っているようにしたいですあなたのデータベースでこれをしないでください。 firebaseListObservableは、firebaseデータベースにも変更内容を反映させるまで更新しないでください。それは感謝

//reference Code 
$tasks: FirebaseListObservable<Task[]>; 
tasks:any[]; 

$tasks = this.db.list('/users/' + uid); 

$tasks.subscribe((todoitems) => { 
      console.log('items', todoitems); 
      this.tasks = todoitems; 
     }); 
//Now you can easily apply filter on this.tasks.filter(()=>{return});