Angular 2 modele dayalı formda seçili kontrol seçeneğinin ayarlanması

Question

SO ve başka yerlerde birçok benzer mevcut yanıtı araştırdım, ancak bunun çözümünü bulamıyorum.

Biçim oluşturmak için Angular 2'deki modele dayalı yaklaşımı kullanıyorum, bu hem bir ekleme hem de düzenleme formudur. Düzenleme modundayken, veriler bir hizmetten alınan verilerle doldurulur: bu yönün tamamı iyidir, çünkü basit metin girişlerinin hepsi doğru şekilde bağlanır. özelliklerinin

biri 'Ülke' ve aşağıdaki gibi bu bir nesnedir:

export class Country {id: number; name: string;} 

Ben mevcut ülkelerin listesini olacak seçkin bir denetime bu bağlamak istiyorum ve itibaren bir form yüklendiğinde nüfuslu model. Bağlantının değerini yalnızca kimlik değil, ülke nesnesi olarak istiyorum. İşte

seçme kontrolün html var:

<select class="form-control" id="country" formControlName="country"> 
      <option value="default">--Select a country--</option> 
      <option *ngFor="let c of countries" [value]="c">{{c.name}}  </option> 
</select> 

Ve burada ben bileşen sınıfından değerini doldurmak için deneyin nerede:

(<FormControl>this.personForm.controls['country']) 
.setValue(this.person.country, { onlySelf: true }); 

Ama seçilen seçenek varken konsol, bu.person.country öğesinin var olduğunu ve doğru nesne ile doldurulduğunu doğrulamasına rağmen sayfa yüklenir.

Bunu ids ile çalışabilirim: sınıfta görünüm ve ekleme .id'de [value] = "c.id" olarak değiştiriliyor ve sonra doğru seçeneğin seçildiği yerde çalışıyor. Sorun, seçimin artık ülke mülküne, sadece kimliğe bir nesne yaymamasıdır. [Value] değerini [ngValue] olarak değiştirmeyi denedim ve aynı sonucu elde ettim. Seçici öğeye [ngModel] = "ülke" yi ekledim ve bu da işe yaramadı.

Yardımlarınız için minnettar olurum.

Answer 1

Sorun, büyük olasılıkla this.person.country öğesinin countries dizininizde olduğu gibi country aynı değil.

onlara biz ya açıkça [(ngModel)]person.country select kontrolün valueChanges abone veya bağlayabilir aynı olmak için:

değişikliklere

kod

this.countryForm.controls['country'].valueChanges.subscribe(country => 
    this.person.country = country; 
); 

// initialize by finding the correct country object (this will overwrite the person's country object) 
this.countryForm.controls['country'].setValue(countries.filter(c => c.id === person.country.id)); 

abone

template

Biz hala nesneleri maç

kodu

this.person.country = this.countries.filter(c => c.id === this.person.country.id)[0]; 

şablonu (ki Açısal 2 kullanımları JS kullandığı gerçekten stratejiyi karşılaştırın) yapmak zorunda bağlamak ngModel

<select class="form-control" id="country" formControlName="country" [(ngModel)]="person.country"> 
    <option value="default">--Select a country--</option> 
    <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option> 
</select> 

ngModel Plunker:http://plnkr.co/edit/UIS2V5rKh77n4JsjZtii?p=preview

abonelik Plunker: did it http://plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p=info