具有角度材料自动完成功能的 Angularfire2.5 实时数据库 [英] Angularfire2.5 Real Time Database with angular material autocomplete

问题描述

我正在尝试在 angularfire2 v5 中使用角度材料自动完成输入字段.

I am trying to use the angular material autocomplete input field with angularfire2 v5.

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

I have some difficulties adapting the shown example: https://material.angular.io/components/autocomplete/examples to a firebase list.

示例中使用的函数似乎无法与可观察输入一起使用:

It seems that the functions used in the example can't work with an observable input:

以下代码:

  // 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'.

Property 'startWith' does not exist on type 'Observable[]>'.

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

I can't find the way to make it work.

推荐答案

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

in your filterMembers we are dealing with an subscription, you cannot use filter on an subscription. We need to include map, and also flatten the data in the valueChanges for example with switchMap instead of using map:

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

和下面我们需要使用 map，因为 filter 不能直接应用于订阅.

and below we need as mentioned use map, since filter cannot be applied to an supscription directly.

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

您的模板是正确的！:)

Your template is correct as it sits! :)

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

这篇关于具有角度材料自动完成功能的 Angularfire2.5 实时数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！