21

EDIT: Updated Plunkr: http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview

this part works:

<div *ngFor="let entry of entries | async">
  Label: {{ entry.label }}<br>
  Value: {{ entry.value }}
</div>

but I've problems with the select box, the error message is:

Can't bind to 'ngModel' since it isn't a known property of 'select'

The whole Component:

//our root app component
import {Component} from '@angular/core';
import {NgFor} from '@angular/common';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `

  <select [(ngModel)]="selectValue" name="selectValue">
    <option *ngFor="let entry of entries | async" 
    [value]="entry.value">{{entry.label}}</option>
  </select>

    <div *ngFor="let entry of entries | async">
      Label: {{ entry.label }}<br>
      Value: {{ entry.value }}
    </div>
  `,
  directives: [NgFor]
})
export class App {

  entries: any = {};
  selectValue:any;

  constructor(private _http: Http) {
    this.entries = this._http.get("./data.json")
                            .map(res => res.json());
  }
}

and data.json

[
  {
    "timestamp": 0,
    "label": "l1",
    "value": 1
  },
  {
    "timestamp": 0,
    "label": "l2",
    "value": 2
  },
  {
    "timestamp": 0,
    "label": "l3",
    "value": 3    
  }
]
4

6 回答 6

19

>= RC.5

FormsModule需要导入ngModel才能使用

@NgModule({
  imports: [BrowserModule /* or CommonModule */, 
  FormsModule, ReactiveFormsModule],
  ...
)}
class SomeModule {}

<= RC.4

在config.js添加

'@angular/forms': {
  main: 'bundles/forms.umd.js',
  defaultExtension: 'js'
},

在main.ts添加

import {provideForms, disableDeprecatedForms} from '@angular/forms';

bootstrap(App, [disableDeprecatedForms(),provideForms()])

Plunker 示例

也可以看看

于 2016-08-17T10:28:15.517 回答
7

在 app.modules.ts 之后

import { NgModule } from '@angular/core';

放：

import { FormsModule } from '@angular/forms';

然后在

imports: [
 BrowserModule
 ],

插入 FormsModule 类似的东西：

imports: [
 BrowserModule,
 FormsModule
 ],
于 2018-01-13T06:25:27.800 回答
5

这发生在我的测试套件中，尽管我已经FormsModule在我的组件*.module.ts文件中导入。

在我的*.component.spec.ts文件中，我需要将FormsModule 和 ReactiveFormsModule添加到导入列表中configureTestingModule：

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

...
TestBed.configureTestingModule({
    imports: [ 
        FormsModule, 
        ReactiveFormsModule,
        ....],
    providers: [MyComponent, ...],
    declarations: [MyComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

这解决了我的情况。

于 2018-01-02T10:27:21.773 回答
0

上面的错误是因为你没有导入 FormsModule，ngModel 存在于 FormsModule 包中，所以为了摆脱这个错误import {FormsModule} from '@angular/forms'，在 app.module.ts 类的导入中添加并添加 FormsModule。

于 2018-07-30T11:29:33.863 回答
0

您需要将以下内容添加到您的app.module.ts文件中。

import { FormsModule } from '@angular/forms';

和，

@NgModule({
   imports: [
      FormsModule,
      ...
   ]})
于 2017-12-13T11:48:55.207 回答
0

执行以下您必须使用的操作，[ngValue]而不是[val]

<select [(ngModel)]="selectValue">
    <option *ngFor="let entry of entries | async" 
        [ngValue]="entry.value">{{entry.label}}
    </option>
</select>
于 2016-08-16T20:21:32.910 回答