0

我对 Angular2 相当陌生，并且正在开发一个小型 POC，我想在下拉列表中向用户显示选项列表，然后用户将选择其中一个选项，然后我想用选择选项的 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 [(ngModel)]="townHall">

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

TIA。

4

1 回答 1

4

您需要在 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 {}
于 2018-03-08T07:51:24.037 回答