Définir l'élément initialement sélectionné dans une liste de sélection dans Angular2

Question

J'ai réussi à lier une Select list à mon modèle pour l'enregistrer, mais je n'arrive pas à trouver comment faire pour qu'Angular2 sélectionne automatiquement la bonne option sur la Select list si je fournis une fonctionnalité d'édition. En d'autres termes, si je modifie un objet préexistant via un formulaire, j'ai besoin que la liste Select reflète l'état initial de l'objet (par exemple l'option 5 dans la liste Select), plutôt que de sélectionner par défaut le premier élément.

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

Comment j'imagine que cela devrait fonctionner, mais ce n'est pas le cas !

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object === originalObject">{{object.name}}</option>
</select>

J'essaie donc d'utiliser la propriété "selected" de l'option, mais pour une raison quelconque, cela ne fait rien. Le "selectedObject" dans ce cas serait un objet dans le composant qu'il peut lire.

Answer 1

Ok, j'ai compris quel était le problème, et l'approche que je crois qui fonctionne le mieux. Dans mon cas, parce que les deux objets n'étaient pas identiques d'un Javascript point de vue, que dans la mesure où elles ont partagé les mêmes valeurs, mais ils étaient différents objets réels, par exemple, originalObject a été instancié entièrement séparément objects qui était essentiellement un ensemble de données de référence (pour remplir la liste déroulante).

J'ai trouvé que l'approche qui fonctionne le mieux pour moi était de comparer une propriété unique des objets, plutôt que de comparer directement l'ensemble des deux objets. Cette comparaison est effectuée dans la limite de propriété selected:

<select [ngModel]="originalObject">
    <option *ngFor="let object of objects" [ngValue]="object" [selected]="object.uniqueId === originalObject.uniqueId">{{object.name}}</option>
</select>

Answer 2

Mise à jour vers angular 4.X.X, il y a une nouvelle façon de marquer une option sélectionnée :

<select [compareWith]="byId" [(ngModel)]="selectedItem">
  <option *ngFor="let item of items" [ngValue]="item">{{item.name}}
  </option>
</select>

byId(item1: ItemModel, item2: ItemModel) {
  return item1.id === item2.id;
}

Certains tutoriel ici

Answer 3

Si vous utilisez

<select [ngModel]="object">
    <option *ngFor="let object of objects" [ngValue]="object">{{object.name}}</option>
</select>

Vous devez définir la propriété object dans votre classe de composants à l'élément de objects que vous souhaitez présélectionner.

class MyComponent {
  object;
  objects = [{name: 'a'}, {name: 'b'}, {name: 'c'}];
  constructor() {
    this.object = this.objects[1];
  }
}

Answer 4

Vous pouvez réaliser la même chose en utilisant

<select [ngModel]="object">
  <option *ngFor="let object of objects;let i= index;" [value]="object.value" selected="i==0">{{object.name}}</option>
</select>

Answer 5

Cela fonctionnera-t-il si l'on retire l'élément modifié du tableau et qu'on le place au début du tableau, de manière à ce qu'il soit automatiquement sélectionné ?