Asignación de valor a id en Angular 2 - angular, angular2-formas

Mi código parece

<select [(ngModel)]="">
<option value="1">New York</option>
<option value="2"Phoenix</option>
<option value="3">Boston</option>
</select>

¿Qué debo poner en [(ngModel)] para que mi base de datos tenga los valores (las identificaciones de la ciudad, por ejemplo, 1), pero cuando lo recupero, se muestra New York en la página en el menú desplegable?

Lo guardo como cityId en la base de datos?

Respuestas

los [(ngModel)] vinculante puede ser atado a alguna Propiedad en su componente. Luego puede hacer referencia a esa propiedad en métodos ejecutados en el componente para enviar a recursos remotos, como RESTful API o similar.

Para <select> desplegable, el [(ngModel)] será atado a la selección value propiedad de lo dado <option>. Simplemente cree una propiedad en su clase como cityId: number; y poner eso en el [(ngModel)]="cityId". Luego haz referencia al cityId en los métodos a través de this.cityId que puedes enviar a la API / base de datos o lo que necesites. Puede establecer el valor del menú desplegable actualizando el cityId valor numérico de propiedad tal como this.cityId = 2 y el <select> dentro de la vista se actualizará en consecuencia.

Aquí hay un ejemplo artificial y una plunker Demostrando la funcionalidad. Recomiendo colocar la plantilla en un archivo separado. Es difícil ver exactamente lo que necesita sin información adicional sobre sus formularios, modelos y estructura de la aplicación.

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

@Component({
selector: "my-app",
template: `
<select [(ngModel)]="cityId">
<option value="-1">Select city...</option>
<option value="1">New York</option>
<option value="2">Phoenix</option>
<option value="3">Boston</option>
</select>

<br />

<div>Select City Id: {{cityId}}</div>

<br />

<button type="button" (click)="doSomethingWithCityValues()">Click Me</button>

<br />
<br />

<button type="button" (click)="setCityValue()">Click Me</button>
`
})
export class AppComponent {
cityId: number = -1;

doSomethingWithCityValues() {
// you can use cityId value via this.cityId
console.log(this.cityId);
}

setCityValue() {
this.cityId = Math.floor(Math.random() * 3) + 1;
}
}

Esperemos que esto ayude!