Question

我创建了一个类似的集合（JSON等价物）：

sports: {
  football: {
    name: 'football',
    varieties: {
      11aside: {
        name: '11 a side'
      },
      6aside: {
        name: '6aside'
      }
    }
  }
}

我可以在选择框中显示不同的运动，如下所示：

// sports.controller.ts
this.sports = db.collection('sports').valueChanges();

// sports.html
<select formControlName="sport">
    <option value="">- Select -</option>
    <option *ngFor="let sport of sports | async" [value]="sport.id">{{sport.name}}</option>
</select>

选择完成后，我想显示第二个选择框，让用户选择“变种”。在angularfire2中实现这一目标的最佳方法是什么？

感谢您的帮助。

Answer 1

我无法理解为什么这必须特别依赖于angularfire2。假设您已将formControl初始化为第一个选择下拉列表sport作为空字符串，并且在初始加载时未使用有效选项预选。像，

this.form = this.formbuilder.group({
 sport: ''
});

您可以在模板中查找其值更改，以显示各种类型的相应辅助下拉列表。

假设你有一个＆＃39;属性＆＃39;根据所选值在任何给定时刻保持品种的价值，在您的组件中听取第一个选择控件的值变化，

varieties: any[] = null; // declare varieties property in component   

this.form.get('sport').valueChanges
  .subscribe((newVal) => {
    if (!newval) {
      this.varieties = null;
    } else {
      this.varieties = this.sports.filter((elem) => elem.id === newVal)[0].varieties;
      // assuming each newVal is actually the property value of 'id' based on '[value]="sport.id"' <-- this assignment in the template
    }
  });

现在只需将新的选择下拉列表添加到您的模板

即可

<select formControlName="sport">
    <option value="">- Select -</option>
    <option *ngFor="let sport of sports | async" [value]="sport.id">{{sport.name}}</option>
</select>
<select *ngIf="varities">
    <option value="">- Select -</option>
    <option *ngFor="let variety of varities" [value]="variety.name">{{variety.name}}</option>
</select>

您可能必须根据要为此新选择下拉列表分配的实际value修改代码，甚至可能为品种选择添加新的formControl。希望它有所帮助。

使用Firebase的Firestore动态下拉列表 - AngularFire2

1 个答案: