編集:更新されたPlunkr: http://plnkr.co/edit/fQ7P9KPjMxb5NAhccYIq?p=preview
この部分は機能します:
<div *ngFor="let entry of entries | async">
Label: {{ entry.label }}<br>
Value: {{ entry.value }}
</div>
選択ボックスに問題がありますが、エラーメッセージは次のとおりです。
「select」の既知のプロパティではないため、「ngModel」にバインドできません
コンポーネント全体:
//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
config.js
追加
'@angular/forms': {
main: 'bundles/forms.umd.js',
defaultExtension: 'js'
},
main.ts
追加
import {provideForms, disableDeprecatedForms} from '@angular/forms';
bootstrap(App, [disableDeprecatedForms(),provideForms()])
こちらもご覧ください
後のapp.modules.ts
import { NgModule } from '@angular/core';
置く:
import { FormsModule } from '@angular/forms';
そして次に
imports: [
BrowserModule
],
次のようなFormsModuleを挿入します。
imports: [
BrowserModule,
FormsModule
],
コンポーネントの*.module.ts
ファイルにFormsModule
をすでにインポートしているにもかかわらず、これは私のテストスイートで私に起こっていました。
私の*.component.spec.ts
ファイルで、FormsModule
andReactiveFormsModule
の両方をconfigureTestingModule
のインポートリストに追加する必要がありました。
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
TestBed.configureTestingModule({
imports: [
FormsModule,
ReactiveFormsModule,
....],
providers: [MyComponent, ...],
declarations: [MyComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
これは私のケースを修正しました。
上記のエラーは、FormsModuleをインポートしていないために発生します。ngModelはFormsModuleパッケージに存在するため、このエラーを解消するには、import {FormsModule} from '@angular/forms'
を追加し、apps.module.tsクラスのインポートにFormsModuleを追加します。
[ngValue]
の代わりに[val]
を使用する必要があります。
<select [(ngModel)]="selectValue">
<option *ngFor="let entry of entries | async"
[ngValue]="entry.value">{{entry.label}}
</option>
</select>
以下をapp.module.ts
ファイルに追加する必要があります。
import { FormsModule } from '@angular/forms';
そして、
@NgModule({
imports: [
FormsModule,
...
]})