Question

我的代码看起来像

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

我应该在[(ngModel)]放置什么，以便我的数据库具有值（城市ID - 比如说1），但当我检索它时，它会在页面上显示New York下拉？

我将它作为cityId存储在数据库中？

Answer 1

[(ngModel)]绑定可以绑定到组件上的任何属性。然后，您可以在组件上执行的方法中引用该属性，以提交到RESTful API或类似的远程资源。

对于<select>下拉菜单，[(ngModel)]将与给定value的select <option>属性相关联。只需在您的班级上创建一个属性，例如cityId: number;，然后将其放入[(ngModel)]="cityId"。然后通过cityId引用方法中的this.cityId，您可以将其发送到API /数据库或您需要的任何内容。您可以通过更新cityId属性数值（例如this.cityId = 2）来设置下拉列表的值，并且视图中的<select>会相应更新。

这是一个人为的例子和一个展示功能的plunker。我建议将模板放在一个单独的文件中。如果没有关于表单，模型和应用程序结构的其他信息，很难确切地看到您需要的内容。

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

希望这有帮助！

在Angular 2中将值映射到id

1 个答案: