Question

我正在尝试使用angularfire2 v5的角度材质自动完成输入字段。

我在将显示的示例https://material.angular.io/components/autocomplete/examples改编为火力列表列表时遇到了一些困难。

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

以下代码：

  // 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 []＆gt;'上不存在。

我找不到让它发挥作用的方法。

Answer 1

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

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

及以下我们需要使用map，因为filter无法直接应用于订阅。

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

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

1 个答案: