1

我在一个项目中使用材料自动完成功能，但与他们的示例不同，我从云 Firestore 数据库（测试版）中提取。我之前设置了一个服务来处理从json 服务器检索数据，这很好。

  ngOnInit() {
      this.branches = this.branchService.get_branches();
      ...
  }

自从迁移到 firebase 后，我成功地显示了我的数据，但typeahead 功能没有按预期工作。

我尝试过同时使用 valueChanges() 和 snapshotChanges() 但两者似乎都没有什么不同，我不知道为什么。

组件.ts 文件：

branches: any = [];
branchCtrl: FormControl = new FormControl();
filteredBranches: Observable<any[]>;

branchCol: AngularFirestoreCollection<Branch>;
branch$: Observable<Branch[]>;

constructor( private afs: AngularFirestore ) {

}

ngOnInit() {

  this.branchCol = this.afs.collection('branches');
  //this.branch$ = this.branchCol.valueChanges();
  this.branch$ = this.branchCol.snapshotChanges().map(actions => { return actions.map(action => { const data = action.payload.doc.data() as Branch; const id = action.payload.doc.id; return { id, ...data }; }); });

  this.branches = this.branch$;


  this.filteredBranches = this.branchCtrl.valueChanges
    .startWith(null)
    //.map(b => b && typeof b === 'object' ? b.name : b)
    .switchMap(val => {
      return this.filterBranches(val || '')
    });
}

displayFn(b): string {
  return b ? b.name : b;
}
filterBranches(val: string) {
  return this.branches
    .map(response => response.filter(option => {
      return option.name.toLowerCase().indexOf(val.toLowerCase()) === 0
    }));
}

getBranch(value){
  console.log('branch selected');
}

我的假设是由于 firebase 的集合/文档数据结构，filteredBranches 无法正确映射值更改。任何帮助将不胜感激。

4

0 回答 0