md-table 带有 FirebaseListObservable 的数据源

Question

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

现在我想合并这两个家伙和 return 一个用输入值过滤的数组以提供 md-table.

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

谁能帮帮我？谢谢。

编辑：

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

错误类型错误：您提供了 '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

好吧，我想让你知道一件事，如果你更新你的 firebaseListObservable 中的任何东西，它会自动更新你的 firebase 数据库，所以如果你要更新你的 firebaseListObservable 只是为了在你的视图中反映它而不是在你的视图中数据库然后不要这样做。不要更新你的 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});

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

md-table 带有 FirebaseListObservable 的数据源

md-table DataSource with FirebaseListObservable

angular-material2

angularfire2

angular