Kątowe 4 - używanie obiektów dla wartości opcji na liście wyboru

Question

Wiem, że podobne pytania zostały zadane, ale nie znalazłem żadnej z dobrą odpowiedzią. Chcę utworzyć listę wyboru w formie kątowej, w której wartością dla każdej opcji jest obiekt. Ponadto NIE chcę używać dwukierunkowego powiązania danych. na przykład jeśli składnik ma następujące pola:

 

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

Chciałbym mój szablon HTML, aby zawierał to:

 

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

Z tym kodem, choć moja setNewUser() funkcja odbiera zawartość Nazwa wybranego użytkownika pole. Dlaczego wybiera tę konkretną dziedzinę, nie mam pojęcia. Spodziewam się, że otrzyma "wartość" wybranej opcji, którą konkretnie ustawię na obiekt użytkownika.

Należy zauważyć, że użyłem ngValue zamiast wartości w opcji. To było przez sugestię innych na SO. Jeśli zamiast tego używam wartości, to dzieje się tak, że obiekt zostaje przekonwertowany na ciąg "[obiekt obiektu]", co jest wartością, którą otrzymuje setNewUser(), co jest bezużyteczne.

FYI, pracuję na systemie Windows 10, używając ustawienia kątowego 4.0.0 z @ kątowym/cli 1.1.2. Oto() metoda setNewUser:

 

    setNewUser(user: User): void { 

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

jestem ustalania tylko to, co dokładnie jest przekazywana do niego zarówno moja zalogowaniu ją, a tym to również na szablonie: <pre>{{curUser}}</pre>

Answer 1

Jak value atrybutem option tagu nie można przechowywać całego obiektu, utworzymy nową właściwość id w tablicy lUsers, aby śledzić wybrany element.

HTML:

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

Przepuszcza unikalną id do naszego setNewUser funkcji na zmiany.

W swoim component.ts:

... 

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

Oto plnkr demo powyższego kodu. Otwórz swoje narzędzia programistyczne, aby wyświetlić dzienniki konsoli.

Answer 2

Możesz użyć [ngValue] zamiast [value] na -Elementy. To działa dla mnie.

Odkryłam, że informacje tutaj: https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/

Answer 3

obecnie używam [ngValue] i przechowuje obiekty w porządku.

Wyjaśnienie, dlaczego pan doświadczył problemów przy użyciu (change) zamiast (ngModelChange) można znaleźć w this question

Tak, ponieważ już używany [ngValue], prawdopodobnie chcesz zrobić coś takiego, gdzie można korzystać tylko jeden wiążący w porządku sposób, aby móc użyć dyrektywy ngModelChange:

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

i plik ts będzie uchwycić zdarzenia i otrzymać obiektu użytkownika bez konieczności śledzenia go przez ID, w zasadzie ponowne użycie starej metoda będzie dobra wystarczy:

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