Зіставлення значення в id в кутовому 2 - кутовому, кутовому2-формах

Мій код виглядає так

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

Що я повинен поставити [(ngModel)] так що моя база даних має значення (ідентифікатори міста - скажімо 1), але коли я його отримую, він відображається New York на сторінці у спадному списку?

Я зберігаю його як cityId в базі даних?

Відповіді:

The [(ngModel)] прив’язка може бути прив’язана до будь-який властивість вашого компонента. Потім ви можете посилатися на це властивість у методах, виконаних на компоненті, щоб подати на віддалені ресурси, такі як RESTful API або подібні.

Для <select> випадаючий, [(ngModel)] буде прив’язаний до вибраного value властивість даного <option>. Просто створіть властивість для свого класу, наприклад cityId: number; і поставити це в [(ngModel)]="cityId". Потім посилайтесь на cityId у методах via this.cityId яку ви можете надіслати в API / базу даних або все, що вам потрібно. Ви можете встановити значення спадного меню, оновивши cityId числове значення властивості, наприклад this.cityId = 2 і <select> в межах перегляду буде відповідно оновлено.

Ось надуманий приклад і планкер демонстрація функціональності. Я рекомендую помістити шаблон у окремий файл. Важко зрозуміти, що саме вам потрібно, без додаткової інформації щодо ваших форм, моделей та структури додатків.

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

Сподіваюся, це допомагає!