Ligar o elemento de selecção ao objecto em Angular
gostaria de ligar um elemento select a uma lista de objectos -- o que é 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;
}
neste caso, parece que o valor seleccionado seria um número -- o id do item seleccionado.
No entanto, gostaria de ligar-me ao próprio objecto do país para que o valor selected seja o objecto e não apenas o id. Eu tentei mudar o valor da opção como então ...<option *ngFor="#c of countries" value="c">{{c.name}}</option>
também tentei ligar-me ao evento de mudança para poder definir o objecto com base no id seleccionado; contudo, parece que o evento de mudança dispara antes do ngModel ligado ser actualizado -- o que significa que não tenho acesso ao valor recentemente seleccionado nesse ponto.
Existe uma uma forma limpa de ligar um elemento select a um objecto com o Angular 2?
9 answers
<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>
Exemplo de StackBlitz
Nota: pode utilizar [ngValue]="c" em vez de [ngValue]="c.id" onde c é o objecto completo do país.
[value]="..." só suporta valores de texto[ngValue]="..." suporta qualquer tipo
Actualizar
Se o value é um objecto, a instância pré-seleccionada precisa de ser idêntica a um dos valores.
Ver também a comparação personalizada recentemente adicionada https://github.com/angular/angular/issues/13268 disponível desde 4, 0-beta.7
<select [compareWith]="compareFn" ...
Tome cuidado se quiser aceder this dentro de compareFn.
compareFn = this._compareFn.bind(this);
// or
// compareFn = (a, b) => this._compareFn(a, b);
_comareFn((a, b) {
if(this.x ...) {
...
}
<select [(ngModel)]="selectedValue">
<option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
</select>Você pode fazer isso também sem a necessidade de usar [(ngModel)] na sua marca <select>
Declare uma variável no seu ficheiro ts
toStr = JSON.stringify;
E no seu modelo faça isto
<option *ngFor="let v of values;" [value]="toStr(v)">
{{v}}
</option>
E depois usar
let value=JSON.parse(event.target.value)
Para processar o texto de volta para um objecto de JavaScript válido
Pode seleccionar o Id usando uma função
<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>
Modelo HTML:
Adicionei (ngModelChange)="selectChange($event)" ao meu 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>
no componente.ts:
listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];
An você precisa adicionar a component.ts Esta função:
selectChange( $event) {
//In my case $event come with a id value
this.model.myListOptions = this.listOptions[$event];
}
Nota:
Eu tento com [select]="oneOption.id==model.myListOptions.id" e não trabalho.
============= outras maneiras podem ser: =========
Modelo HTML:
Adicionei [compareWith]="compareByOptionId à minha 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>
no componente.ts:
listOptions = [
{ id: 0, name: "Perfect" },
{ id: 1, name: "Low" },
{ id: 2, name: "Minor" },
{ id: 3, name: "High" },
];
An você precisa adicionar a component.ts Esta função:
/* Return true or false if it is the selected */
compareByOptionId(idFist, idSecond) {
return idFist && idSecond && idFist.id == idSecond.id;
}
<select (change) = "ChangeValue($event)" (ngModel)="opt">
<option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>
Só no caso de alguém querer fazer o mesmo usando formas reactivas:
<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>
Veja o exemplo de trabalho aqui
Além disso, se nada mais de soluções dadas não funcionar, verifique se importou "FormsModule" dentro de "AppModule", que era uma chave para mim.
Você pode obter o valor seleccionado também com a ajuda do click (), passando o valor seleccionado através da função
<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>