具有角材料自动完成功能的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/组件/自动填充/示例到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.

推荐答案

在您正在处理的订阅中，您不能在订阅中使用filter.我们需要包含map，并且还使用switchMap代替map来对valueChanges中的数据进行展平:

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屋！