0
245
VistasAngular: cómo seleccionar por defecto el primer elemento en una selección cuando se usa un objeto complejo
Estoy desarrollando una aplicación web usando Angular 11. Un componente recibe una matriz con un objeto a través de la entrada:
[ {propery1: "a", property2:"b"}, {propery1: "c", property2:"d"}, {propery1: "e", property2:"f"}, ]Entonces, en el archivo my_component.ts tengo:
@Input() myArray: any[]; private selectedObject: any; // The current object selected with all its properties! Me gustaría que selectedObject sea el objeto completo (de la matriz) seleccionado a través de un menú desplegable. Lo hice así:
<select [(ngModel)]="selectedObject"> <option *ngFor="let object of myArray;" [ngValue]="object">{{object.property1}}</option> </select> El objeto selectedObject está vinculado con el object de valor actual. Obtuve lo que quería, pero no puedo entender por qué aparece el menú desplegable en la pantalla sin opciones seleccionadas :
Si abro el menú, los resultados aparecen, como se esperaba:
Y si selecciono una propiedad, la "propiedad vacía" desaparece:
Ojalá esto no sucediera. Me gustaría que el valor 'a' sea visible desde el principio. Esto se puede lograr fácilmente cambiando el valor de ngValue con object.property1 . Pero de esta manera, el enlace no funcionaría como yo quiero (el objeto selectedObject debe ser el objeto completo y ninguna propiedad). ¿Cómo hago que aparezca la primera propiedad sin que ocurra este problema?
1 Respuestas
Responde la pregunta0
En su archivo .ts:
myArray = [ {property1: "a", property2:"b"}, {property1: "c", property2:"d"}, {property1: "e", property2:"f"}, ] public selectedValue: string public selectedObject: any ngOnInit() { this.selectedValue = this.myArray[0].property1 this.onValueChange(); } onValueChange() { const found = this.myArray.filter( obj => obj.property1 === this.selectedValue) this.selectedObject = found? found[0] : {} }En tu archivo .html
<select [(ngModel)]="selectedValue" (ngModelChange)="onValueChange()"> <option *ngFor="let item of myArray" [value]="item.property1">{{item.property1}}</option> </select> <p>selectedvalue : {{selectedValue}}</p> <p *ngIf="selectedObject">selected object : {{selectedObject.property1}} ; {{selectedObject.property2}}</p>