2016-04-03 59 views
0

我嘗試使用Angular2的一種方式綁定到輸入字段值綁定到一個JSON屬性。
JSON對象看起來是這樣的:Angular2 - 如何使用一種方法綁定綁定到JSON屬性

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

我想將值綁定到的entries特定name屬性。
這是我嘗試做的方式結合:

<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">那有什麼問題呢?

我可以使用雙向綁定,而不是過程,但我有一些其他的限制(禁止表單元素)按下該按鈕之後的按鈕並沒有對用戶輸入剛剛申請。

回答

0

隨着

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

綁定的JSON值輸入。

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

其中ngModel是與

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

在一起的指令,它們所支持的簡寫形式

[(ngModel)]="model" 
+0

謝謝您的回答,但加入'(ngModelChange)=」 model = $ event「'輸入元素不起作用。另外,沒有錯誤消息。正如我前面所說,由於其他限制,我不能使用'[(ngModel)] =「model」'。我只想將輸入綁定到模型。如果模型更改,我不想更新視圖。 – Allipon

+1

如果你不想或不能使用'ngModel',那麼你需要監聽輸入元素本身的事件,比如''(或者任何其他像'(blur)',(keypress)',...'(ngModel)'一樣發出輸入的事件都不會做任何事情,因爲沒有'ngModel'事件''[(ngModel)]'only因爲這是一種特殊的形式,其中'[xxx] =「model」'和'(xxxChange)=「model = $ event」'可以結合到'[(xxx)] =「model」' –

+0

謝謝! ngModel可以完成這項工作...我現在使用(更改)。 – Allipon