Imposta l'elemento inizialmente selezionato in Seleziona elenco in Angular2

Question

Sono riuscito a ottenere un elenco Seleziona da associare al mio modello allo scopo di salvare, ma non riesco a capire come rendere Angular2 seleziona automaticamente l'opzione corretta nell'elenco Seleziona se sto fornendo funzionalità di modifica. In altre parole, se sto modificando un oggetto preesistente tramite un modulo, ho bisogno dell'elenco Seleziona per riflettere lo stato iniziale dell'oggetto (ad esempio l'opzione 5 nell'elenco di selezione), piuttosto che l'impostazione predefinita per il primo elemento .

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

Come immagino dovrebbe funzionare, ma non lo fa!

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

Quindi, in sostanza che sto cercando di fare uso della proprietà 'selezionata' in opzione, ma per qualsiasi motivo non fa nulla. L'oggetto "selectedObject" in questo caso sarebbe un oggetto nel componente che può leggere.

Answer 1

Ok, quindi ho capito qual era il problema e l'approccio che credo funzioni meglio. Nel mio caso, poiché i due oggetti non erano identici da una prospettiva Javascript, come in: potrebbero aver condiviso gli stessi valori, ma erano diversi oggetti reali, ad es. originalObject è stato istanziato completamente separatamente da objects che era essenzialmente una matrice di dati di riferimento (per popolare il menu a discesa).

Ho trovato che l'approccio che ha funzionato meglio per me era quello di confrontare una proprietà unica degli oggetti, piuttosto che confrontare direttamente i due interi oggetti. Questo confronto viene fatto nella proprietà bound selected:

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

Answer 2

Funzionerà, se si rimuove l'elemento modificato dall'array e lo si preme all'inizio dell'array, in modo che venga selezionato automaticamente?

Answer 3

Se si utilizza

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

È necessario impostare la proprietà object in voi classe di componenti per l'elemento da objects che si desidera hanno pre-selezionati.

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

Answer 4

Update per 4.XX angolare, c'è un nuovo modo per marcare l'opzione selezionata:

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

Answer 5

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