dropdowns dynamique à l'aide de Firestore de Firebase - AngularFire2

Question

j'ai créé une collection comme si (équivalent JSON):

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

Je peux afficher les différents sports dans une boîte de sélection comme ceci:

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

Une fois une sélection a été faite, je voudrais afficher une deuxième boîte de sélection, et laisser l'utilisateur choisir la «variété». Quel serait le meilleur moyen d'y parvenir dans angularfire2?

Merci pour toute aide.

Answer 1

Je ne vois pas pourquoi cela doit dépendre de angularfire2 en particulier. En supposant que vous avez initialisé votre formulaire formControl pour la première liste déroulante sport en tant que chaîne vide et lors du chargement initial, il n'est pas présélectionné avec une option valide. Comme,

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

Vous pouvez rechercher sa modification de valeur dans le modèle pour afficher la liste déroulante secondaire correspondante pour les variétés.

En supposant que vous avez une « propriété » pour maintenir la valeur des variétés à un instant donné en fonction de la valeur sélectionnée, dans votre composant écouter pour la première changement de valeur de commande de sélection,

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

Maintenant, ajoutez simplement cette nouveau menu déroulant de sélection et à votre modèle,

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

Vous pourriez avoir à modifier le code en fonction de la value réelle à attribuer à ce nouveau menu déroulant de sélection et pourrait même ajouter une nouvelle FormControl pour la sélection des variétés. J'espère que cela aide.