使用Firebase的Firestore的动态下拉菜单-AngularFire2

Question

I have created a collection like so (JSON equivalent):

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

I can display the different sports in a select box like so:

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

Once a selection has been made, I would like to display a 2nd select box, and let the user choose the 'variety'. What would be the best way of achieving this in angularfire2?

Thanks for any help.

Answer 1

I can't see why this has to be dependent on angularfire2 in particular. Assuming you have initialized your formControl for first select dropdown sport as an empty string and on initial load it is not pre-selected with a valid option. Like,

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

You can look for its value change in the template to show the corresponding secondary dropdown for varieties.

Assuming you have a 'property' to hold the value of varieties at any given instant based on the selected value, in your component listen for the first select control's value change,

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
    }
  });

Now simply add this new select dropdown as well to your 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>

You might have to modify the code based on the actual value to be assigned for this new select dropdown and might even add a new formControl for the varieties selection. Hope it helps.