select 无法使用 angular2 处理 ngValue

Question

我是 Angular2 的新手，正在开发一个小型 POC，我想在其中向用户显示下拉列表中的选项列表，然后用户将 select 其中一个选项，然后我想用 selection 选项的 ID 更新模型。

一切正常，直到我使用以下代码显示下拉列表和其中的数据：

  <select>
    <option *ngFor="let th of townHalls" [value]="th.id">{{th.name}}</option>
  </select>

但是，考虑到 th.id 是一个数字，当我将代码更改为使用 ngValue 而不是 value 时，代码停止工作。

  <select>
    <option *ngFor="let th of townHalls" [ngValue]="th.id">{{th.name}}</option>
  </select>

除此之外，如果我将 ngModel 添加到 select，代码将再次停止工作。下面是我使用的代码：

<select [(ngModel)]="townHall">

我无法理解我在这里做错了什么。这是对 plunker 的 link：https://plnkr.co/edit/8FhZpXzgwLU0EJMZVNsm?p=preview

TIA。

Answer 1

您需要在 src/app.ts

中导入 FormsModule

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {TOWNHALLS} from '../townHalls.ts'
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@Component({
  selector: 'my-app',
  templateUrl: 'app.html',
})
export class App {
  name:string;
  townHalls= TOWNHALLS;
  townHall: number;

  constructor() {

  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

select 无法使用 angular2 处理 ngValue

select not working with ngValue using angular2

angularjs-ng-value

angular