4 Açısal - Ben de benzer sorular sorulmuştur biliyorum, ama iyi bir cevap hiçbiri buldum bir seçim listesindeki

Question

seçeneği değerleri için nesneleri kullanarak. Her bir seçeneğin değerinin bir nesne olduğu bir Açısal formda bir seçim listesi oluşturmak istiyorum. Ayrıca, 2 yönlü veri bağlama kullanmak istemiyorum. Örneğin. Benim Bileşen bu alanları varsa:

 

    lUsers: any[] = [ 
     { Name: 'Billy Williams', Gender: 'male' }, 
     { Name: 'Sally Ride', Gender: 'female'} 
     ]; 
    curUser: any; 

Bunu içerecek şekilde benim HTML şablonu istiyorum: Bu kod ile

 

    <select #selectElem (change)="setNewUser(selectElem.value)"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

olsa da, benim setNewUser() fonksiyonu seçilen kullanıcının Adınızın içeriğiyle alır alan. Neden o belirli alanı seçiyor, hiçbir fikrim yok. Ne bekliyoruz o Özellikle bir kullanıcı nesnesine ayarlanmış seçilen seçeneğin "değer" alacağı olmasıdır. Bunun yerine seçeneğindeki değerin ngValue kullanılan

Not. Bu, SO üzerinde başkalarının önerisiyle oldu. Bunun yerine değer kullanırsanız ne olur nesne faydasız setNewUser() alır ne dize '[Nesne nesne]' e dönüştürülmüş olur olmasıdır.

Bilginize, ben @ açısal/cli 1.1.2 ile açısal 4.0.0 kullanarak Windows 10 üzerinde çalışıyorum. Tam olarak hem benim günlük kaydını kendisine bunu geçirilmediğini sadece ne belirleyen ve aynı zamanda şablonu bu dahil ediyorum

 

    setNewUser(user: User): void { 

    console.log(user); 
    this.curUser = user; 
    } // setNewUser() 

: Burada setNewUser() yöntemidir <pre>{{curUser}}</pre>

Answer 1

option etiketinin nitelik value olarak seçilen öğenin takip etmek için biz lUsers dizide yeni bir özellik id yaratacak bir bütün nesneyi saklamak mümkün değil.

HTML:

<select #selectElem (change)="setNewUser(selectElem.value)"> 
    <option *ngFor="let user of lUsers" [value]="user.id"> 
     {{user.Name}} 
    </option> 
</select> 

Bu değişikliği üzerindeki setNewUser işlevine özgü id geçecek. senin component.ts ise

: Burada

... 

lUsers: any[] = [ 
    { id: 1, Name: 'Billy Williams', Gender: 'male' }, 
    { id: 2, Name: 'Sally Ride', Gender: 'female'} 
]; 
curUser: any = this.lUsers[0]; // first will be selected by default by browser 

... 

setNewUser(id: any): void { 
    console.log(id); 
    // Match the selected ID with the ID's in array 
    this.curUser = this.lUsers.filter(value => value.id === parseInt(id)); 
    console.log(this.curUser); 
} 

Yukarıdaki kod plnkr demo. Konsol günlüklerini görüntülemek için geliştirici araçlarınızı açın.

Answer 2

-Elements öğesinde [value] yerine [ngValue] değerini kullanabilirsiniz. Benim için çalışıyor.

O bilgi burada bulduk: https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

Answer 3

Şu anda [ngValue] kullanıyorum ve gayet güzel nesneleri saklar.

zaten [ngValue] kullandım çünkü yerine (ngModelChange) ait (change) Yani this question

bulunabilir kullanarak sorunları deneyimli neden olarak açıklama, muhtemelen böyle bir şey yapmak istiyorum, sadece kullanacağı nerede sırayla bağlayıcı tek yön ngModelChange yönergesi kullanmak mümkün:

<select (ngModelChange)="setNewUser($event)" (ngModel)="lUsers"> 
     <option *ngFor="let user of lUsers" [ngValue]="user"> 
      {{user.Name}} 
     </option> 
    </select> 

ve ts dosya olayı yakalayabilir ve temelde eski yöntem iyi olacak yeniden, id bunu takip etmek gerek kalmadan Kullanıcı nesneyi alacak yeterli:

setNewUser(user: User): void { 
    console.log(user); 
    this.curUser = user; 
    }