html - objetos - Enlace del elemento seleccionado al objeto en Angular
crear objetos en angular (10)
A mí me funcionó:
HTML de plantilla:
(ngModelChange)="selectChange($event)"
a mi
select
.
<div>
<label for="myListOptions">My List Options</label>
<select (ngModelChange)="selectChange($event)" [(ngModel)]=model.myListOptions.id >
<option *ngFor="let oneOption of listOptions" [ngValue]="oneOption.id">{{oneOption.name}}</option>
</select>
</div>
En component.ts:
listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];
Necesitas agregar a
component.ts
esta función:
selectChange( $event) {
//In my case $event come with a id value
this.model.myListOptions = this.listOptions[$event];
}
Nota: Intento con
[select]="oneOption.id==model.myListOptions.id"
y no funciona.
============= Otras formas pueden ser: =========
HTML de plantilla:
[compareWith]="compareByOptionId
a mi
select
.
<div>
<label for="myListOptions">My List Options</label>
<select [(ngModel)]=model.myListOptions [compareWith]="compareByOptionId">
<option *ngFor="let oneOption of listOptions" [ngValue]="oneOption">{{oneOption.name}}</option>
</select>
</div>
En component.ts:
listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];
Necesitas agregar a
component.ts
esta función:
/* Return true or false if it is the selected */
compareByOptionId(idFist, idSecond) {
return idFist && idSecond && idFist.id == idSecond.id;
}
Soy nuevo en Angular e intento ponerme al día con la nueva forma de hacer las cosas.
Me gustaría vincular un elemento select a una lista de objetos, lo cual es bastante fácil:
@Component({
selector: ''myApp'',
template: `<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
</select>`
})
export class AppComponent{
countries = [
{id: 1, name: "United States"},
{id: 2, name: "Australia"}
{id: 3, name: "Canada"},
{id: 4, name: "Brazil"},
{id: 5, name: "England"}
];
selectedValue = null;
}
En este caso, parece que selectedValue sería un número: la identificación del elemento seleccionado.
Sin embargo, en realidad me gustaría vincularme al objeto de país en sí mismo para que selectedValue sea el objeto en lugar de solo la identificación. Intenté cambiar el valor de la opción así:
<option *ngFor="#c of countries" value="c">{{c.name}}</option>
Pero esto no parece funcionar. Parece colocar un objeto en mi Valor seleccionado, pero no el objeto que estoy esperando. Puedes ver esto en mi ejemplo Plunker .
También intenté vincular el evento de cambio para poder configurar el objeto yo mismo en función de la identificación seleccionada; sin embargo, parece que el evento de cambio se dispara antes de que se actualice el ngModel vinculado, lo que significa que no tengo acceso al valor recién seleccionado en ese momento.
¿Hay una manera limpia de vincular un elemento seleccionado a un objeto con Angular 2?
Además, si nada más de las soluciones dadas no funciona, verifique si importó "FormsModule" dentro de "AppModule", esa fue una clave para mí.
Crea otro captador para el artículo seleccionado
<form [formGroup]="countryForm">
<select formControlName="country">
<option *ngFor="let c of countries" [value]="c.id">{{c.name}}</option>
</select>
<p>Selected Country: {{selectedCountry?.name}}</p>
</form>
En ts:
get selectedCountry(){
let countryId = this.countryForm.controls.country.value;
let selected = this.countries.find(c=> c.id == countryId);
return selected;
}
En caso de que alguien esté buscando hacer lo mismo con Formularios reactivos:
<form [formGroup]="form">
<select formControlName="country">
<option *ngFor="let country of countries" [ngValue]="country">{{country.name}}</option>
</select>
<p>Selected Country: {{country?.name}}</p>
</form>
Mira el ejemplo de trabajo here
Esto podría ayudar:
<select [(ngModel)]="selectedValue">
<option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
</select>
Para mí funciona así, puedes consolar
event.target.value
.
<select (change) = "ChangeValue($event)" (ngModel)="opt">
<option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>
Puede obtener el valor seleccionado también con la ayuda de click () pasando el valor seleccionado a través de la función
<md-select placeholder="Select Categorie"
name="Select Categorie" >
<md-option *ngFor="let list of categ" [value]="list.value" (click)="sub_cat(list.category_id)" >
{{ list.category }}
</md-option>
</md-select>
Puede seleccionar la identificación usando una función
<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>
También puede hacer esto sin la necesidad de usar
[(ngModel)]
en su etiqueta
<select>
Declara una variable en tu archivo ts
toStr = JSON.stringify;
y en tu plantilla haz esto
<option *ngFor="let v of values;" [value]="toStr(v)">
{{v}}
</option>
y luego usar
let value=JSON.parse(event.target.value)
para analizar la cadena de nuevo en un objeto JavaScript válido
<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>
NOTA: puede usar
[ngValue]="c"
lugar de
[ngValue]="c.id"
donde c es el objeto de país completo.
[value]="..."
solo admite valores de cadena
[ngValue]="..."
admite cualquier tipo
actualizar
Si el
value
es un objeto, la instancia preseleccionada debe ser idéntica a uno de los valores.
Consulte también la comparación personalizada recientemente agregada https://github.com/angular/angular/issues/13268 disponible desde 4.0.0-beta.7
<select [compareWith]="compareFn" ...
Tenga cuidado si desea acceder a
this
dentro de
compareFn
.
compareFn = this._compareFn.bind(this);
// or
// compareFn = (a, b) => this._compareFn(a, b);
_compareFn(a, b) {
// Handle compare logic (eg check if unique ids are the same)
return a.id === b.id;
}