0

he realizado un par de test en Angular 2, y me gustaría resolver una duda.

Ahora mismo trabajo con un simple select, e intento recibir un objeto JSON realizando una selección en él.

FUNCIONA Funciona si quiero recibir tan sólo una parte del JSON (adjunto un ejemplo):

JSON

export class Coche{
  nombre: String;
  dueños: [{
    nombre: String;
  }];
  vendedores: [{
    nombre: String;
  }];
}

Si realizo lo siguiente, funciona: HTML

<select #coche (change)="getCoches(coche.value);" >
    <option type="text" *ngFor="let coche of coches" value="{{coche.nombre}}" >{{coche.nombre}}</option>                        
</select>

TS

   getCoches(nombre: string): void {
        console.log(scenario);
}

NO FUNCIONA Pero si realizo lo siguiente, no:

HTML

<select  #coche (change)="getCoches(coche.value);" >
    <option type="text" *ngFor="let coche of coches" value="{{coche}}" >{{coche.nombre}}</option>                       
</select>

TS

 getCocches(coche: Coche): void {
        console.log(coche);
}

La diferencia es que envío un objeto completo (coche) y no un elemento de éste (coche.nombre). ¿Alguna solución?

2
  • Espero que ese getCocches sea una errata en la pregunta y no en el código Commented el 11 dic. 2017 a las 15:46
  • Lo es. Ahora corrijo el ejemplo. La pregunta es como mandar un objeto JSON completo a través de value. Commented el 11 dic. 2017 a las 15:48

1 respuesta 1

0

Según entiendo quieres mandar el objeto coche como valor, ¿cierto?, pondré de ejemplo como yo lo haría:

Componente.html

<select [(ngModel)]="cocheSelected" name="select-coche" required>
<option selected="true" disabled="disabled">Selecciona un coche</option>
<option *ngFor="let coche of coches" [ngValue]="coche">{{coche.Modelo}}</option>
</select>

Componente.ts

export class Coche {
   coches: Coche[] = [{Id: 1, Modelo: "Scania S"}, {Id: 2, Modelo: "Volvo XL"}];
   cocheSelected: Coche;
   constructor() {}
}

Esa seria la forma de usar Select con Object , la forma primitiva sería:

Componente.ts

cocheSelected = null;
public coches= [
    {Id: 1, Modelo: "Scania S"}, {Id: 2, Modelo: "Volvo XL"}
];

Componente.html

<select name="select-coche" [(ngModel)]="cocheSelected">
        <option *ngFor="let coche of coches" [value]="coche.Id">  
        {{coche.Modelo}}
        </option>
    </select>

Espero ser entendible :-D

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.