web-dev-qa-db-fra.com

Angulaire 4 Sélectionné ne fonctionne pas correctement quand il est donné dans le modèle?

Quand j'essaie de donner un menu déroulant. Par défaut, je dois sélectionner une valeur à afficher. Lorsque je n'utilise pas ngModel, je peux afficher la valeur par défaut.

Sans ngModel

<select class="form-control">
    <option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>

Le code ci-dessus fonctionne bien lorsque nous le compilons. Je suis capable de voir la première valeur sur la liste à afficher.

 enter image description here

Avec ngModel

<select class="form-control" [(ngModel)]="selectedListType">
    <option *ngFor="let type of ListType" [value]="type .id">{{type .name}}</option>
</select>

 enter image description here

C'est l'affichage est vide.

Méthodes essayées:

  1. utilisé sélectionné

<option *ngFor="let type of ListType" [selected]="type.name === 'Dislike'" [value]="type .id">{{type .name}}</option>

  1. utilisé attr.Sélectionné

<option *ngFor="let type of ListType" [ngValue]="type " [attr.selected]="type .name== type.name ? true : null">{{ type.name }}</option>

MODIFIER

  1. Même essayé de définir la valeur sélectionnée via le modèle toujours pas de résultat.

Y a-t-il un autre moyen? Ou Est-ce que je fais quelque chose de mal?

html5angulartypescript
7
Abhishek Ekaanth

Vous définissez la valeur de la variable select en tant que valeur id, alors que vous alimentez la variable selectedListType avec la propriété name. Donc, vous voulez soit fournir la valeur id pour selectedListType, ainsi, par exemple, si votre ListType ressemble à ceci:

[{id:1, name: 'Dislike'},{...}]

vous voulez définir la valeur selectedListyType comme 1. Une autre option est, si vous ne connaissez pas la valeur id, vous pouvez faire:

ngOnInit() {
  this.selectedListType = this.ListType.find(x => x.name === 'Dislike').id
}

et votre modèle ressemblera alors à ceci:

<select class="form-control" [(ngModel)]="selectedListType">
  <option *ngFor="let type of ListType" [value]="type.id">{{type.name}}</option>
</select>
8
AJT_82

Essayez de garder votre valeur et ngModel identiques 

value = {{type .id}} et [(ngModel)]= "selectedListType.id" 

et imprimer la valeur une fois sélectionnée en HTML

<br>id is {{selectedListType.id}}
1
Hrishikesh Kale