1
votes

Impossible d'afficher les options dans la liste de sélection à l'aide de * ngFor dans Angular 9

J'ai du mal à afficher les options dans une liste de sélection. Le code HTML est le suivant:

countryList: Country[] = ["Argentina", "Chile", "Ecuador];

Ce que j'essaie de faire est d'afficher la propriété "Country" (qui est une chaîne) des objets à l'intérieur du tableau countryList. Le problème est qu'il n'y a pas d'options affichées, la liste de sélection est vide.

Je suis sûr que le problème ne vient pas de countryList car si j'exécute le code suivant en dehors de l'élément select, la propriété Country s'affiche correctement.

<h2>{{countryList[0].Country}}</h2>

J'ai également essayé de remplacer countryList par un tableau comme celui-ci, et il s'affiche correctement, donc je ne suis pas sûr que le problème vient de la liste de sélection .

  <select class="selectpicker" (change) = "searchCountry(selectedCountry)" [(ngModel)] = "selectedCountry" data-live-search="true" title = "Selecciona un paÃs">
            <option [ngValue]="object" *ngFor = "let object of countryList" >{{object.Country}}</option> 
  </select>

Peut-il être lié à la longueur du tableau countryList? Il contient 186 éléments.

angular html html-select ngfor

1 commentaires

Sans rapport, mais essayez de ne pas utiliser de noms de variables comme objet ou numéro . Ils peuvent (ou non) interférer avec les types de données JS. Vous pourriez dire quelque chose comme countryObj .

3 Réponses :

0
votes

Veuillez essayer ceci:

countryList: Country[] = ["Argentina", "Chile", "Ecuador];

au cas où cette countryList serait

<option *ngFor="let country of countryList" value="{{country}}">{{country}}</option>

0 commentaires

0
votes

Comme vous l'avez montré, countryList est un tableau de chaînes donc vous ne pouvez pas l'utiliser comme object.Country utilisez simplement l'objet

utilisez comme ci-dessous

<select [(ngModel)]="selectedCountry" (change) = "searchCountry(selectedCountry)">
    <option [value]="object" *ngFor="let object of countryList">{{object}}</option>
</select>

Exemple de travail

https://stackblitz.com/edit/angular-select-example-v6rndj?embed=1&file=app/app.component.html

0 commentaires

0
votes

Merci pour les réponses, j'ai partiellement résolu le problème.

Le code était correct, le problème était la classe de la boîte de sélection dans le code HTML. J'ai supprimé 'class = "selectpicker"' et la boîte de sélection a commencé à afficher toutes les options. Cette classe est de bootstrap-select, peut-être qu'elle ne supporte pas ce genre de clauses.

Donc le code est comme ceci:

<select (change) = "searchCountry(selectedCountry)" [(ngModel)] = "selectedCountry"  title = "Selecciona un paÃs">
            <option *ngFor = "let countryName of countryList" >{{countryName.Country}}</option> 
</select>

J'ai oublié de mentionner que les éléments de countryList sont livrés par une méthode HTTP GET, donc en le remplaçant par une chaîne tableau n'était pas une option. Le problème pourrait avoir été généré par le retard de la réponse HTTP.

Merci encore.

0 commentaires