Angularfire2.5角度材料オートコンプリート付きリアルタイムデータベース

Question

anglefire2 v5で角度材料オートコンプリート入力フィールドを使用しようとしています。

私は示された例を適合させるのにいくつかの困難を抱えています：https://material.angular.io/components/autocomplete/examples火災基地のリスト。

一例に使用する機能が観察入力で動作することができないようです。

次のコード：

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

私は、このエラーをもたらします：

'startWith'プロパティが 'Observable []>'型に存在しません。

私はそれを動作させる方法を見つけることができません。

Answer 1

あなたのfilterMembersではサブスクリプションを扱っていますので、サブスクリプションでfilterを使用することはできません。私たちは、mapを含める必要があり、また、代わりにmapを使用してのswitchMapで例えばvalueChanges内のデータをフラット化：

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

とfilterが直接supscriptionに適用することができないので、私たちは、言及した使用mapとして必要な以下。

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

テンプレートは正しいですか？ :)ここで

はDEMOです：https://plnkr.co/edit/enR5EijpNPHNtTTquFfu?p=preview