首页 文章

具有角度材质自动完成功能的Angularfire2.5实时数据库

提问于
浏览 次
2

我试图使用角度材料自动完成输入字段与angularfire2 v5 .

我在调整显示的示例时遇到了一些困难：https://material.angular.io/components/autocomplete/examples到firebase列表 .

似乎示例中使用的函数无法使用可观察的输入：

以下代码：

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

给我带来这个错误：

属性'startWith'在'Observable []>'类型上不存在 .

我无法找到让它发挥作用的方法 .

angular autocomplete angular-material angularfire2

1 回答

  • 0

    在您的 filterMembers 我们正在处理订阅，您不能在订阅上使用 filter . 我们需要包含 map ，并将 valueChanges 中的数据展平为 switchMap ，而不是使用 map ：

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

    以下我们需要使用 map ，因为 filter 不能直接应用于supscription .

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

    你的模板是正确的！ :)

    这是一个演示：https://plnkr.co/edit/enR5EijpNPHNtTTquFfu?p=preview

    回复于

相关问题