编辑:更新的Plunkr:http://plnkr.co/edit/fq7p9kpjmxb5nahccyiq?p=preview
这部分工作:
<div *ngFor="let entry of entries | async">
Label: {{ entry.label }}<br>
Value: {{ entry.value }}
</div>
//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());
}
}
和data.json
[
{
"timestamp": 0,
"label": "l1",
"value": 1
},
{
"timestamp": 0,
"label": "l2",
"value": 2
},
{
"timestamp": 0,
"label": "l3",
"value": 3
}
]
>=RC.5
需要导入formsmodule
以使ngmodel
可用
@NgModule({
imports: [BrowserModule /* or CommonModule */,
FormsModule, ReactiveFormsModule],
...
)}
class SomeModule {}
<=RC.4
'@angular/forms': {
main: 'bundles/forms.umd.js',
defaultExtension: 'js'
},
import {provideForms, disableDeprecatedForms} from '@angular/forms';
bootstrap(App, [disableDeprecatedForms(),provideForms()])
我正在尝试测试控件的angular2双向绑定。以下是错误: app.component.html app.component.ts app.component.spec.ts
这似乎是一个流行的问题,但解决方案都建议导入FormsModule,这是正在做的。 app.module.shared.ts如下所示: app.module.client.ts文件如下所示: 如果有人能指出我做错了什么,我将非常感激,但我找到的每一篇文章都表明,通过导入FormsModule可以解决这个问题。
在我的@NGModule中,我有导入FormsModule和ReactiveFormsModule。但我仍然得到以下错误: 如果我尝试使用[(ngModel)]绑定,这也会发生在正常的情况下,比如输入 它们被添加到进口商品中
完整代码为: app.module为: 怎么了,为什么对我不起作用?
我正在遵循官方的角“英雄”快速入门教程,同时尝试TDD它。 https://angular.io/docs/ts/latest/tutorial/toh-pt1.html 当我进入替换步骤时: 与 我的Karma test runner抛出以下错误: 错误:模板分析错误:无法绑定到“ng model”,因为它不是“input”的已知属性。(“name:][(ngModel)]=”hero.name
(为简洁起见进行了简化) modal-dialog.html modal-body.html(使用angular2-component-outlet的动态模板)