具有 angular material 自动完成功能的 Angularfire2.5 实时数据库

Question

我正在尝试将 angular material 自动完成输入字段与 angularfire2 v5 一起使用。

我在调整所示示例时遇到一些困难：https://material.angular.io/components/autocomplete/examples 到 firebase 列表。

示例中使用的函数似乎无法处理可观察输入：

以下代码：

  // FROM COMPOSERS.SERVICE.TS

  constructor(private db: AngularFireDatabase) {
     this.membersRef = db.list('/members');
     this.members = this.membersRef.valueChanges();
    }

    getFilteredMembersList() { 
     return this.membersRef.snapshotChanges()
      .startWith(null)
      .map(member => member ? this.filerMembers(member) : this.members.slice());
    }

    filerMembers(member) {
      return this.members.filter(member =>
        member.firstname.toLowerCase().indexOf(member.firstname.toLowerCase()) === 0);
    }
   
   
   // FROM COMPOSER-LIST.COMPONENT.TS
        
 memberCtrl: FormControl = new FormControl();

    ngOnInit() {
     this.filteredMembers = this.memberService.getFilteredMembersList();
    }

<mat-form-field>
  <input matInput placeholder="Search Member" [matAutocomplete]="auto" [formControl]="memberCtrl">
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let member of filteredMembers | async" 
     [value]="member.firstname">
      <span>{{ member.firstname }} {{ member.lastname }}</span>
    </mat-option>
  </mat-autocomplete>
  <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

给我带来这个错误：

属性 'startWith' 在类型 'Observable[]>' 上不存在。

我找不到让它工作的方法。

Answer 1

在您的 filterMembers 中，我们正在处理订阅，您不能在订阅上使用 filter。我们需要包含 map，并且还要将 valueChanges 中的数据展平，例如使用 switchMap 而不是使用 map:

this.filteredMembers = this.memberCtrl.valueChanges
  .startWith(null)
  .switchMap(val => {
    return this.filterMembers(val || '')
  })

及以下我们需要使用 map，因为 filter 不能直接应用于订阅。

filterMembers(val: string) {
  return this.members
    .map(response => response.filter(option => { 
      return option.firstname.toLowerCase().indexOf(val.toLowerCase()) === 0
    }));
}

您的模板是正确的！ :)

这是一个演示：https://plnkr.co/edit/enR5EijpNPHNtTTquFfu?p=preview

具有 angular material 自动完成功能的 Angularfire2.5 实时数据库

Angularfire2.5 Real Time Database with angular material autocomplete

autocomplete

angular-material

angularfire2

angular