Question

我无法输出和过滤firebase的$ key对象。加载此错误时出现：错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays

我的火力基地

"clients" : {
    "222" : {
      ...
    },
    "1111" : {
      ...
    },
    "42423424" : {
      ...
    },
    "242342342" : {
     ...
    },
    "453533535" : {
      ...
    },
    "822233311" : {
     ...
    },
    "89510135551" : {
     ...
    },
    "89510145553" : {
     ...
    }
  }

我的HTML

<md-input-container>
  <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="clientCtrl">
</md-input-container>
<md-autocomplete #auto="mdAutocomplete">
  <md-option *ngFor="let state of filteredClient | async" [value]="state.$key">
    {{ state.$key }}
  </md-option>
</md-autocomplete>

我的ts文件

clientbase: FirebaseListObservable<any[]>;
clientCtrl: FormControl;
filteredClient: any;
 constructor(private af: AngularFire){
 this.clientbase = af.database.list('/clients/');

    this.clientCtrl = new FormControl();
     this.filteredClient = this.clientCtrl
                               .valueChanges
                               .startWith(null)
                               .map(name => this.filterClient(name));
}

  filterClient(val: string) {
    return val ? this.clientbase
       .map(list => list.filter(
       s =>  new RegExp(`^${val}`, 'gi')
       .test(s.$value)
    )) : this.clientbase;
  }

Answer 1

按如下方式更改您的代码：

  clientbase: any[];
  clientCtrl: FormControl;
  filteredClient: any;

  constructor(private af: AngularFire){
    af.database.list('/clients/')
        .subscribe(items => { this.clientbase = items; });

    this.clientCtrl = new FormControl();
    this.filteredClient = this.clientCtrl
        .valueChanges
        .startWith(null)
        .map(name => this.filterClient(name));
  }

  filterClient(val: string) {
    return val && this.clientbase? 
           this.clientbase
               .filter(s => new RegExp(`^${val}`, 'gi').test(s.$value))
           :this.clientbase;
  }

这种方式对我有用。

Angular 4材料自动完成与firebase

1 个答案: