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

Question

我创建了一个像这样的集合（JSON 等效）：

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

我可以像这样在 select 框中显示不同的运动项目：

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

一旦 selection 完成，我想显示第二个 select 框，让用户选择 'variety'。在 angularfire2 中实现此目标的最佳方法是什么？

感谢您的帮助。

Answer 1

我不明白为什么这必须特别依赖于 angularfire2。假设您已经将第一个 select 下拉列表 sport 的 formControl 初始化为空字符串，并且在初始加载时它没有预先 select 编辑有效选项。喜欢，

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

您可以在模板中查找其值变化以显示相应的品种二级下拉列表。

假设您有一个 'property' 来根据 selected 值在任何给定时刻保存品种的值，在您的组件中监听第一个 select 控件的值变化,

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 下拉列表也添加到您的模板中，

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

您可能需要根据要分配给这个新的 select 下拉列表的实际 value 修改代码，甚至可能为品种 selection 添加一个新的 formControl。希望对你有帮助。

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

Dynamic dropdowns using Firebase's Firestore - AngularFire2

firebase

angularfire2

angular

google-cloud-firestore