0
1.1K
VistasAngular2 + PrimeNG: el valor desplegable seleccionado no funciona correctamente si se establece Editable
Tengo una aplicación Angular2 con la suite PrimeNG instalada.
Estoy tratando de implementar un formulario con un componente desplegable primeNG.
El problema ocurre cuando ejecuto la aplicación y selecciono un elemento del cuadro de lista.
En lugar de mostrar el valor, muestra [objeto Objeto]
el problema
componente html
<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" formControlName="Customer_itm" [(ngModel)]="Customer_itm" filter="filter" editable="editable"> </p-dropdown>declaraciones
/*primeng listBox */ Customer_itm: SelectItem; listCustomers_itm: SelectItem[];ts código para llenar las opciones:
this.mdService.Get_Customer(false).subscribe( data => { this.listCustomers = data; this.listCustomers_itm = []; for (let c of this.listCustomers) { this.listCustomers_itm.push({ label: (c.code + ' - ' + c.businessName), value: { id: c.idCustomer, name: c.businessName, code: c.code } }); } } );Si en lugar de usar una etiqueta y un valor personalizados, use valores planos como:
this.listCustomers_itm.push({ label: c.code, value:c.businessName });Todo funciona correctamente...
También intenté implementar la función onChange:
onCustomerSelect(e) { console.log(e); }La salida en la consola cuando selecciono un elemento es:
Object { id: 5, name: "Luigino Gatto", code: "5" } Finalmente descubrí que el código funciona correctamente si elimino el atributo editable="editable" , pero necesito configurarlo como editable...
gracias al apoyo
3 Respuestas
Responde la pregunta0
En lugar de insertar valores individuales en el value , puede colocar todo el objeto en él.
this.mdService.Get_Customer(false).subscribe( data => { this.listCustomers = data; this.listCustomers_itm = []; for (let c of this.listCustomers) { this.listCustomers_itm.push({ label: (c.code + ' - ' + c.businessName), value: c }); } } );0
desde su plantilla, parece que intenta trabajar con un enfoque basado en modelos (formcontrolName) y basado en plantillas (ngModel).
lo cual no tiene sentido.
<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" **formControlName**="Customer_itm" **[(ngModel)]**="Customer_itm" filter="filter" editable="editable"> </p-dropdown>Seleccione el por qué apropiado y utilícelo correctamente.
0
Yo estaba teniendo el mismo problema. Por lo que puedo decir, cuando se le proporciona un objeto como valor, el componente p-dropdown llamará a value.toString().
Para solucionar esto, agregué el siguiente método al objeto que quería en el campo de valor.
toString() : string{ return this.name.toString(); }Solo para aclarar por qué estoy usando name.toString(): a Prime le gusta trabajar con cadenas primitivas de mecanografiados en lugar del objeto contenedor String.