Question

我是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。

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

使用angular2

1 个答案: