具有角度材料自动完成功能的 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屋!