具有角度材料自动完成功能的 Angularfire2.5 实时数据库

Question

我正在尝试将角度材料自动完成输入字段与 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>

给我带来了这个错误：

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

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

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