Angularfire2.5 Real Time Datenbank mit winkligem Material Autocomplete

Question

Ich versuche das Winkelmaterial Autocomplete Eingabefeld mit angularfire2 v5 zu verwenden.

Ich habe einige Schwierigkeiten bei der Anpassung des gezeigten Beispiels: https://material.angular.io/components/autocomplete/examples an eine Firebase-Liste.

Es scheint, dass die im Beispiel verwendeten Funktionen nicht mit einem beobachtbaren Eingang arbeiten können:

Der folgende Code:

// FROM COMPOSERS.SERVICE.TS 
 

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

 
    getFilteredMembersList() { 
 
    \t return this.membersRef.snapshotChanges() 
 
    \t \t .startWith(null) 
 
    \t \t .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 
 
     
 
\t memberCtrl: FormControl = new FormControl(); 
 

 
    ngOnInit() { 
 
    \t 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" 
 
    \t [value]="member.firstname"> 
 
     <span>{{ member.firstname }} {{ member.lastname }}</span> 
 
    </mat-option> 
 
    </mat-autocomplete> 
 
    <mat-icon matSuffix>search</mat-icon> 
 
</mat-form-field>

bringt mir diesen Fehler:

Die Eigenschaft 'startWith' existiert beim Typ 'Observable []>' nicht.

Ich kann den Weg nicht finden, es zu arbeiten.

Answer 1

in Ihrem filterMembers haben wir es mit einem Abonnement zu tun, Sie können nicht filter für ein Abonnement verwenden. Wir müssen map umfassen, und glätten die Daten auch im valueChanges zum Beispiel mit switchMap statt map die Verwendung:

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

und unten wir wie erwähnt Verwendung benötigen map, da filter nicht direkt an einen ABONNENT angewandt werden kann, .

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

Ihre Vorlage ist korrekt, wie sie sitzt! :)

Hier ist eine DEMO: https://plnkr.co/edit/enR5EijpNPHNtTTquFfu?p=preview