首页 文章

Angular 2和Observables：'t bind to ' ngModel ' since it isn' t 'select'的已知属性

提问于
浏览 次
18

编辑：更新了Plunkr：http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview

这部分有效：

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

但我对选择框有问题，错误信息是：

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    
  }
]
json asynchronous drop-down-menu angular angular2-observables

6 回答

  • 3

    >= 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 example

    也可以看看

    回复于
  • 0

    在app.modules.ts之后

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

    放：

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

    然后在

    imports: [
 BrowserModule
 ],

    插入FormsModule类似于：

    imports: [
 BrowserModule,
 FormsModule
 ],
    回复于
  • 17

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

    在我的 *.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]
})

    这解决了我的情况 .

    回复于
  • 6

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

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

    和，

    @NgModule({
   imports: [
      FormsModule,
      ...
   ]})
    回复于
  • 0

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

    <select [(ngModel)]="selectValue">
    <option *ngFor="let entry of entries | async" 
        [ngValue]="entry.value">{{entry.label}}
    </option>
</select>
    回复于
  • 0

    导致上述错误的原因是您尚未导入FormsModule，而且还存在于FormsModule包中的ngModel，因此，为了摆脱此错误，请添加 import {FormsModule} from '@angular/forms' 并在app.module.ts类的导入中添加FormsModule .

    回复于

相关问题