Question

我有一个FirebaseListObservable和一个BehaviorSubject监听输入过滤器。

现在我想合并两个人并返回一个数组，该数组使用输入中的值进行过滤，以提供md-table。

我从https://material.angular.io/components/table/examples过滤表中得到了这个例子。

任何人都可以帮助我吗？谢谢。

修改

现在它正常工作，但我在加载组件时遇到错误。在输入字段上写一些内容后，开始工作正常。

错误类型错误：您提供了＆＃39; undefined＆＃39;预期流的地方。您可以提供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

我想告诉你一件事是，如果你更新firebaseListObservable中的任何东西，它会自动更新你的firebase数据库，所以如果你要更新你的firebaseListObservable只是为了反映你的视图而不是你的数据库那么不要这样做。除非您想要反映firebase数据库的更改，否则不要更新firebaseListObservable。希望它有助于谢谢

//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});

Answer 2

我解决了将BehaviorSubject更改为Observable

的问题

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() {}
}

带有FirebaseListObservable的{md-table DataSource

2 个答案: