Невозможно отобразить автозаполнение valueChanges с базой данных Cloud Firestore

Question

Я использую автозаполнение материала в проекте, но, в отличие от их примера, я извлекаю данные из базы данных облачного пожарного хранилища (бета). Ранее я настроил службу для обработки извлечения данных с сервера JSON, и это работало нормально.

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

С тех пор, как я перешел на базу Firebase, я успешно смог отобразить свои данные, но функции ввода текста не работают должным образом.

Я попытался использовать оба метода valueChanges() и snapshotChanges(), но ни один из них не имеет значения, и я не знаю почему.

Файл component.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');
}

Я предполагаю, что FilterBranches не может правильно отобразить изменения значений из-за структуры сбора / документа данных в firebase. Любая помощь будет принята с благодарностью.