Vinculando el elemento seleccionado al objeto en Angular

Me gustaría vincular un elemento seleccionado 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 selectedValueserí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í, de modo que ese selectedValuesea ​​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 selectedValue, pero no el objeto que estoy esperando. Puedes ver esto en mi ejemplo de Plunker .

También intenté vincularme al 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 activa antes de que se actualice el ngModel vinculado, lo que significa que no tengo acceso al valor recién seleccionado en ese momento.

¿Existe una forma limpia de vincular un elemento de selección a un objeto con Angular 2?

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

Ejemplo de StackBlitz

NOTA: puede usar en [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 valuees 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" ...

Ocúpate si quieres acceder al thisinterior 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;
}

Esto podría ayudar:

    <select [(ngModel)]="selectedValue">
          <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option>
    </select>

También puede hacer esto sin la necesidad de usar [(ngModel)]en su <select>etiqueta

Declare una variable en su archivo ts

toStr = JSON.stringify;

y en tu plantilla haz esto

 <option *ngFor="let v of values;" [value]="toStr(v)">
      {{v}}
 </option>

y luego usa

let value=JSON.parse(event.target.value)

para volver a analizar la cadena en un objeto JavaScript válido

Funcionó para mí:

HTML de plantilla:

Agregué (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.tsesta 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 trabajo.

============= Otras formas pueden ser: =========

HTML de plantilla:

Agregué [compareWith]="compareByOptionIda 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.tsesta función:

 /* Return true or false if it is the selected */
 compareByOptionId(idFist, idSecond) {
    return idFist && idSecond && idFist.id == idSecond.id;
 }

En caso de que alguien esté buscando hacer lo mismo usando Reactive Forms:

<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 aquí

Puede seleccionar la identificación usando una función

<option *ngFor="#c of countries" (change)="onchange(c.id)">{{c.name}}</option>

Para mí está funcionando así, puedes consolar event.target.value.

<select (change) = "ChangeValue($event)" (ngModel)="opt">   
    <option *ngFor=" let opt of titleArr" [value]="opt"></option>
</select>

Crear otro captador para el elemento 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;
}

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í.

También puede obtener el valor seleccionado 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>

utilizar de esta manera también ...

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
     <option *ngFor="let c of countries" value="{{c.id}}">{{c.name}}</option>
 </select>

En app.component.html:

 <select type="number" [(ngModel)]="selectedLevel">
          <option *ngFor="let level of levels" [ngValue]="level">{{level.name}}</option>
        </select>

Y app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  levelNum:number;
  levels:Array<Object> = [
      {num: 0, name: "AA"},
      {num: 1, name: "BB"}
  ];

  toNumber(){
    this.levelNum = +this.levelNum;
    console.log(this.levelNum);
  }

  selectedLevel = this.levels[0];

  selectedLevelCustomCompare = {num: 1, name: "BB"}

  compareFn(a, b) {
    console.log(a, b, a && b && a.num == b.num);
    return a && b && a.num == b.num;
  }
}

<select name="typeFather"
    [(ngModel)]="type.typeFather">
        <option *ngFor="let type of types" [ngValue]="type">{{type.title}}</option>
</select>

ese enfoque siempre funcionará, sin embargo, si tiene una lista dinámica, asegúrese de cargarla antes que el modelo

Atención, usuarios de Angular 2+: por alguna razón, [valor] no funciona con elementos. utilice [ngModel] en su lugar.

<select [ngModel]="selectedCountry">
    <option *ngFor="let country of countries" [value]="country">{{country.name}}</option>
</select>