Angularfire2.5 Real Time Database with angular material autocomplete

问题

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

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:

The following code :

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

brings me this error :

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

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

回答1:

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 || '')
  })

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! :)

Here's a DEMO: https://plnkr.co/edit/enR5EijpNPHNtTTquFfu?p=preview

来源：https://stackoverflow.com/questions/47094045/angularfire2-5-real-time-database-with-angular-material-autocomplete

标签

angular

autocomplete

angular-material

angularfire2