2016-04-03 10 views
0

Angular2の一方向データバインディングを使用して、入力フィールド値をJSONプロパティにバインドしようとしています。Angular2 - JSON属性にバインドする一方向のデータバインディングを使用する方法

[ 
    { 
    "name": "my name", 
    "list": [ 
     { 
     "date": "0101970", 
     "list": [ 
      { 
      "timespan": "6-7", 
      "entries": [ 
       { 
       "name": "" 
       }, 
       { 
       "name": "" 
       }, 
       { 
       "name": "" 
       } 
      ] 
      } 
     ] 
     } 
    ] 
    } 
] 

私はentriesの特定name属性に値をバインドしたい:
JSONオブジェクトは、次のようになります。
これは私が途中で結合やろうかです:

<div class="col-md-4" *ngFor="#category of categories"> 
     <div> 
      <div class="col-md-12"> 
       <h1>{{category.name}}</h1> 
      </div> 
     </div> 
     <div *ngFor="#listentry of category.list"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <h2>{{listentry.date}}</h2> 
       </div> 
      </div> 

      <div class="row" *ngFor="#shift of listentry.list"> 
       <div class="row"> 
        {{shift.timespan}} 
       </div> 
       <div class="row" *ngFor="#entry of shift.entries"> 
        <div class="col-md-10"> 
         <input type="text" class="form-control" (ngModel)="entry.name"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

これは私のコンポーネントである:

export class InputComponent { 

public categories:Category[]; 

constructor(private _dataService:DataService) { 
// ... fetch data from the service here 
} 
} 

私はAngular2 (ngModel)="attribute"でデータバインディングは、ビューからモデルに結合し、[ngModel]="attribute"理解したように他の方法でバインドします。
だから私の<input type="text" class="form-control" (ngModel)="entry.name">の何が間違っていますか?

私はコースの代わりに2ウェイのデータバインディングを使用できますが、ボタンを押した後で、ユーザー入力ではなく適用するいくつかの他の制約(フォーム要素を無効にする)があります。

答えて

0

<input type="text" class="form-control" [ngModel]="entry.name"> 

を使用すると、入力するJSON値をバインドします。 ngModelは、彼らが「=速記フォームにあなたの答えのための

[(ngModel)]="model" 
+0

感謝をサポートしていますが、 '(ngModelChange)を追加し、一緒

@Input() ngModel; // for the [ngModel]="..." bindign @Output() ngModelChange = EventEmitter(); // for the (ngModelChange)="..." binding 

とディレクティブです

(ngModelChange)="model=$event" updates the model when an 'ngModelChange' event is emitted. 
[(ngModel)]="model" binds two-way 

input要素へのmodel = $ event "'は機能しません。また、エラーメッセージもありません。前述のように、他の制約のために '[(ngModel)] =" model "を使うことはできません。入力をモデルにバインドしたいだけです。モデルが変更された場合、私はビューを更新しません。 – Allipon

+1

'ngModel'を使用したくない場合や使用できない場合は、' 'のように入力要素自体のイベントをリッスンする必要があります(ngModel) ''(ngModel) 'のように入力が' ngModel'イベントだけで何もしません。これは '[xxx] =" model "と'(xxxChange)= "model = $ event" 'を([xxx)] =" model "と組み合わせることができる特殊な形式なので動作します –

+0

ありがとう! ngModelは仕事をすることができます...私は今(変更)を使用します。 – Allipon

関連する問題