Je dois imprimer des pays en fonction de l'option sélectionnée dans un tableau de mon code de manière dynamique.

Question

J'ai besoin d'une aide en code simple. Si je choisis une lettre particulière, les pays correspondants doivent être affichés, à ma position actuelle je ne suis pas capable de le faire de manière dynamique. Par exemple, si je choisis la lettre A, alors les pays correspondants doivent être affichés en dehors de la liste déroulante.

          {{o.letter}}

Les pays sont : {{ o.countries }}

export class AppComponent {
  selectedOption: string;

  options = [
    { letter: "A", countries: ["Afghanistan", "Albanie", "Argentine"] },
    { letter: "B", countries: ["Bangladesh", "Bahamas", "Bahreïn"] }
  ]

}

Si A est choisi alors Afghanistan, Albanie .... Si B est choisi alors .... Si C est choisi alors .... Je devrais pouvoir étendre le tableau à l'avenir.

Answer 1

Vous pouvez utiliser ngValue au lieu d'utiliser ngFor. Vous pouvez consulter cette réponse. Voici un exemple fonctionnel.

Votre code devient

    {{o.letter}}

{{selectedOption | json}} 

{{selectedOption.countries}}

Answer 2

Vous pouvez essayer ceci

 Les pays sont : {{ o.countries }}