navigationend - router events subscribe angular 4

Angular 4: uso de objetos para valores de opción en una lista de selección

Question

Sé que se han formulado preguntas similares, pero no he encontrado ninguna con una buena respuesta. Quiero crear una lista de selección en forma angular, donde el valor de cada opción es un objeto. Además, no quiero usar enlace de datos de 2 vías. por ejemplo, si mi componente tiene estos campos:

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

Me gustaría que mi plantilla HTML contenga esto:

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

Sin embargo, con este código, mi función setNewUser () recibe el contenido del campo Nombre del usuario seleccionado. Por qué escoge ese campo específico, no tengo ni idea. Lo que espero es que reciba el "valor" de la opción seleccionada, que específicamente configuré para un objeto de usuario.

Tenga en cuenta que utilicé ngValue en lugar de valor en la opción. Eso fue por sugerencia de otros en SO. Si utilizo valor en su lugar, lo que sucede es que el objeto se convierte a la cadena ''[Objeto objeto]'', que es lo que setNewUser () recibe, lo cual es inútil.

Para su información, estoy trabajando en Windows 10, usando angular 4.0.0 con @ angular / cli 1.1.2. Aquí está el método setNewUser ():

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

Estoy determinando qué es exactamente lo que se está pasando, tanto mi registro como el registro, y también estoy incluyendo esto en la plantilla: <pre>{{curUser}}</pre>

Answer 1

Actualmente estoy usando [ngValue] y almacena objetos muy bien.

La explicación de por qué experimentó problemas al usar (change) lugar de (ngModelChange) se puede encontrar en esta pregunta

Entonces, como ya has usado [ngValue] , probablemente quieras hacer algo como esto, donde solo usarás el enlace de una manera para poder usar la directiva ngModelChange:

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

Y su archivo ts capturará el evento y recibirá el objeto Usuario sin necesidad de rastrearlo por ID, básicamente reutilizando su antiguo método será suficiente:

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

Answer 2

Como el atributo de value de la etiqueta de option no puede almacenar un objeto completo, crearemos una nueva id propiedad en la matriz de lUsers para realizar un seguimiento del elemento seleccionado.

HTML:

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

Esto pasará la id única a nuestra función setNewUser en el cambio.

En su componente.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);
}

Aquí está la demostración plnkr del código anterior. Abra sus herramientas de desarrollador para ver los registros de la consola.

Answer 3

Puede usar [ngValue] en lugar de [valor] en los -Elementos. Esto funciona para mi.

He encontrado esa información aquí: https://www.reddit.com/r/Angular2/comments/65run4/select_option_using_value_vs_ngvalue/