Angular 2+ 和 Observables:无法绑定到“ngModel"，因为它不是“select"的已知属性 [英] Angular 2+ and Observables: Can't bind to 'ngModel' since it isn't a known property of 'select'

问题描述

更新 Plunkr:http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview

这部分有效:

<div *ngFor="let entry of entry | async">标签:{{ entry.label }}
值:{{ entry.value }}

但是我的选择框有问题，错误信息是:

无法绑定到ngModel"，因为它不是select"的已知属性

整个组件:

//我们的根应用组件从 '@angular/core' 导入 {Component}；从@angular/common"导入 {NgFor}；从@angular/http"导入 {HTTP_PROVIDERS, Http}；导入'rxjs/Rx'；从 'rxjs/Rx' 导入 {Observable}；@成分({选择器:'我的应用'，提供者:[HTTP_PROVIDERS]，模板:`<select [(ngModel)]="selectValue" name="selectValue"><option *ngFor="让条目条目 | 异步"[value]="entry.value">{{entry.label}}</option></选择><div *ngFor="让条目条目 | 异步">标签:{{ entry.label }}
值:{{ entry.value }}

`，指令:[NgFor]})出口类应用{条目:任何 = {};选择值:任意；构造函数(私有_http:Http){this.entries = this._http.get("./data.json").map(res => res.json());}}

和 data.json

<预><代码>[{时间戳":0，标签":l1"，价值":1},{时间戳":0，标签":l2"，价值":2},{时间戳":0，标签":l3"，价值":3}]

解决方案

>= RC.5

需要导入 FormsModule 以使 ngModel 可用

@NgModule({进口:[BrowserModule/* 或 CommonModule */，FormsModule, ReactiveFormsModule],...)}类 SomeModule {}

<= RC.4

在 config.js 添加

'@angular/forms': {main: 'bundles/forms.umd.js',默认扩展名:'js'},

在main.ts中添加

import {provideForms, disableDeprecatedForms} from '@angular/forms';引导程序(应用程序，[disableDeprecatedForms()，provideForms()])

Plunker 示例

另见

• https://angular.io/docs/ts/最新/食谱/rc4-to-rc5.html

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

解决方案

>= RC.5

The FormsModule needs to be imported to make ngModel available

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

<= RC.4

In config.js add

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

in main.ts add

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

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

Plunker example

See also

• https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

这篇关于Angular 2+ 和 Observables:无法绑定到“ngModel"，因为它不是“select"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！