So legen Sie den Anfangswert von Angular 2 fest Wählen Sie

Question

Ich habe eine Auswahlliste, die ich auf einen gespeicherten Wert initialisieren möchte, der vom Server zurückgegeben wird. Aber was auch immer ich versuche, ich kann nicht den ausgewählten Wert verwenden.

Ich verwende Angular 2.2.0 und Reaktive Formen.

Hier ist eine Liste von Werten für die Auswahlliste.

private categoryList: ICategory[] = [ 
    new Category({ id: 1, name: 'Cat 1' }), 
    new Category({ id: 2, name: 'Cat 2' }), 
    new Category({ id: 3, name: 'cat 3' }) 
]; 

Der gespeicherte Wert ist:

{ id: 1, name: 'Cat 1' } 

Mit Formbuilder Ich schaffe das Formular

this.itemForm = this.fb.group({ 
     name: [null, Validators.required], 
     description: [null, Validators.required], 
     weight: [null, Validators.required], 
     dimensions: [null, Validators.required], 
     category: [null, Validators.required] 
    }); 

ich initialisieren es dann mit den gespeicherten Daten

(<FormGroup>this.itemForm) 
     .setValue({ 
      name: item.name, 
      description: item.description, 
      weight: item.weight, 
      dimensions: item.dimensions, 
      category: item.category 
     }, { onlySelf: true }); 

Die Vorlage sieht wie folgt aus

<select name="category" [formControl]="itemForm.controls['category']"> 
     <option [selected]="itemForm.controls['category'].value == null" value="">-- Select --</option> 
     <option *ngFor="let cat of categories" [ngValue]="cat"> 
      {{cat.name}} 
     </option> 
    </select> 
{{itemForm.controls['category'].value | json }} 

Erwartetes Ergebnis Der Name Element ein in der Auswahl ausgewählt und entspricht der Text in der JSON unter Vorlage angezeigt

Aktuelles Verhalten Der JSON zeigt dies:

{ "id": 1, "name": "Cat 1" } 

Aber nichts ist in der Auswahl

ausgewählt Wenn --Auswahl-- das JSON-Updates korrekt „“ gewählt wird.

Wenn eine andere Katze ausgewählt wird, wird der JSON ebenfalls korrekt aktualisiert.

Was mache ich falsch, wie initialisiert die Auswahl?

EDIT Ich habe auch versucht dies:

<option *ngFor="let cat of categories" [selected]="itemForm.controls['category'].value.id == cat.id" [ngValue]="cat"> 

Answer 1

Wenn ich Sie richtig verstehe, möchten Sie einen Standardwert festlegen. Dann können Sie einfach auf Ihren item.category + den Index des Werts verweisen, den Sie festlegen möchten.

Ich würde die Werte wie folgt festlegen, wo wir das erste Element als Standardwert festlegen.

setValues() { 
    this.itemForm 
     .setValue({ 
      name: item.name, 
      category: item.category[0].id 
     }) 
} 

und dann formGroup und formControlName in Form verwenden, so:

<form [formGroup]="itemForm"> 
    <input formControlName="name"/> 
    <small *ngIf="!itemForm.controls.name.valid">Name is required!</small> 
    <!-- More code --> 
    <select formControlName="category"> 
    <! -- set ngValue to cat.id --> instead of just cat! 
    <option *ngFor="let cat of categories" [ngValue]="cat.id"> 
     {{cat.name}} 
    </option> 
    </select> 
</form> 

die [ngValue] Set (oder verwenden Sie nur [value]) entweder cat.name oder cat.id je nachdem, was Sie verwenden möchten, so dass, wenn Sie verwenden ngValue, das bindet das ganze Objekt nicht!

Hier ist eine funktionierende Plunker. Da ich nicht weiß, wo Sie die Werte einstellen, habe ich an dieser Stelle eine setValues -Schaltfläche im Plotter erstellt, die imitiert, wenn die Werte später eingestellt werden.

Hoffe diese Hilfe!

Answer 2

Versuchen Sie es mit [attr.selected] und [attr.value] anstelle von [ausgewählt] und [ngValue].

Answer 3

Versuchen Sie diesen Code. Es funktioniert Angular 5

<select formControlName="category"> 
<option [ngValue]="undefined" selected disabled>Select Type</option> 
    <option *ngFor="let cat of categories" [ngValue]="cat.id"> 
     {{cat.name}} 
    </option> 
    </select>