Angular 无法绑定到 'ngModel'，因为它不是已知的属性。

14 浏览
0 Comments

Angular 无法绑定到 'ngModel'，因为它不是已知的属性。

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

这部分是有效的：

  标签：{{ entry.label }}
  值：{{ entry.value }}

但是我在选择框方面遇到了问题，错误信息是：

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

整个组件：

//我们的根应用组件
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: `
  
      标签：{{ entry.label }}
      值：{{ entry.value }}
  `,
  directives: [NgFor]
})
export class App {
  entries: any = {};
  selectValue:any;
  constructor(private _http: Http) {
    this.entries = this._http.get("./data.json")
                            .map(res => res.json());
  }
}

和data.json

[

{

"timestamp": 0,

"label": "l1",

"value": 1

},

{

"timestamp": 0,

"label": "l2",

"value": 2

},

{

"timestamp": 0,

"label": "l3",

"value": 3

}

]

0

3 答案

0 Comments

在Angular开发中，有时会遇到一个错误提示：“Can't bind to 'ngModel' since it isn't a known property of”，这个错误提示表示无法绑定到'ngModel'属性，因为它不是一个已知的属性。那么这个问题的出现原因是什么？我们该如何解决呢？

出现这个问题的原因是在模块中未正确导入FormsModule。在app.modules.ts文件中，我们需要导入FormsModule模块才能正确使用ngModel指令。在这个问题的具体案例中，我们可以看到在import { NgModule } from '/core';之后添加了import { FormsModule } from '/forms';。接着，在imports数组中加入FormsModule，确保FormsModule被正确导入和声明，如下所示：

imports: [
 BrowserModule,
 FormsModule
 ],

这样，我们就可以解决这个错误，正确地使用ngModel指令了。

0
0 Comments

问题的出现原因可能是在测试套件中发生的，尽管已经在组件的"*.module.ts"文件中导入了FormsModule。在"*.component.spec.ts"文件中，需要在configureTestingModule的imports列表中添加FormsModule和ReactiveFormsModule：

import { FormsModule, ReactiveFormsModule } from '/forms';
...
TestBed.configureTestingModule({
    imports: [ 
        FormsModule, 
        ReactiveFormsModule,
        ....],
    providers: [MyComponent, ...],
    declarations: [MyComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

这样解决了我的问题。注意，providers可能也是服务。

原文链接：https://stackoverflow.com/questions/39740633

0
0 Comments

Angular中出现"Can't bind to 'ngModel' since it isn't a known property of"问题的原因是没有将FormsModule导入，使ngModel无法使用。解决方法是在imports中加入FormsModule。

在RC.5版本中，需要导入FormsModule，使ngModel可用。具体做法是在所需的模块中添加FormsModule到imports数组中。

在RC.4版本及之前的版本中，需要在config.js中添加'/forms'配置，并在main.ts中导入provideForms和disableDeprecatedForms。具体做法如下：

在config.js中添加：

'/forms': {

main: 'bundles/forms.umd.js',

defaultExtension: 'js'

}

在main.ts中导入并使用provideForms和disableDeprecatedForms：

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

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

以上这些步骤已经完成，如果问题依然存在，则可能是其他与observables相关的问题。

以上是我在你的Plunker中进行的更改，使其正常运行。但我并没有使用RC5版本，如果RC4版本能正常运行就足够了。

根据你提问下面的评论，我不确定是否能在RC.4版本中使用相同的代码。在我的回答中使用的代码在RC.5版本中会收到废弃警告（在我的Plunker中也可以看到）。

对于select框，我在chrome中检查到的结果是：<!--template bindings={ "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object]" }-->

如果你使用对象作为值，需要使用[ngValue]而不是[value]。在中添加了name="x"，这似乎是新的forms模块中使用ngModel的独立元素所必需的。我想这就是全部更改了。

我之前已经为select添加了name：plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq，但没有起作用（name为"selectValue"）。你在配置中改变了什么？或者我可能不应该使用"selectValue"作为select的name？我真的很困惑，..

再次回答，是的。我在我的回答中提到了这一点。你的Plunker中没有包含这些内容。

我只想指出，在RC5中，select元素上的name属性是不必要的。至少在我这里的本地项目中，如果正确导入Forms包，ngModel可以正常使用，无需name属性。

参考链接：

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

0