Wartość odwzorowania na id w Angular 2 - kątowe, kątowe2-formy

Mój kod wygląda

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

Co powinienem umieścić? [(ngModel)] więc moja baza danych ma wartości (identyfikatory miasta - powiedzmy 1), ale gdy go odzyskam, wyświetla się New York na stronie w menu rozwijanym?

Przechowuję to jako cityId w bazie danych?

Odpowiedzi:

The [(ngModel)] wiązanie można powiązać każdy właściwość w twoim komponencie. Następnie można odwołać się do tej właściwości w metodach wykonywanych na komponencie w celu przesłania do zasobów zdalnych, takich jak RESTful API lub podobny.

Dla <select> rozwijane, [(ngModel)] zostaną powiązane z wybranym value własność danego <option>. Po prostu stwórz własność w swojej klasie, np cityId: number; i umieść to w [(ngModel)]="cityId". Następnie odwołaj się do cityId w metodach za pośrednictwem this.cityId które możesz wysłać do API / bazy danych lub cokolwiek potrzebujesz. Możesz ustawić wartość menu rozwijanego poprzez aktualizację cityId wartość liczbowa właściwości, taka jak this.cityId = 2 i <select> w widoku zostanie odpowiednio zaktualizowany.

Oto wymyślony przykład i plunker wykazanie funkcjonalności. Polecam umieszczenie szablonu w osobnym pliku. Trudno jest znaleźć dokładnie to, czego potrzebujesz, bez dodatkowych informacji dotyczących formularzy, modeli i struktury aplikacji.

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;
}
}

Mam nadzieję, że to pomoże!