2016-04-03 15 views
0

bağlanması için tek yönlü veriyi kullanma Angular2'nin bir JSON özelliğine bir giriş alanı değerini bağlamak için tek yönlü veritabanını kullanmayı denerim.
JSON nesnesi şuna benzer:Angular2 - JSON özniteliğine

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

Ben entries belirli name öznitelik değer bağlamak istiyorum.
Bu Yolda bağlayıcı yapmaya çalışıyoruz nasıl: Ben (ngModel)="attribute" model ve [ngModel]="attribute" için görünümünden bağlanan Angular2 içinde veri bağlama anlamak gibi

export class InputComponent { 

public categories:Category[]; 

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

:

<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> 

Bu benim Bileşen olduğunu diğer yöne bağlar.
Peki, <input type="text" class="form-control" (ngModel)="entry.name"> ile ilgili sorun nedir?

Elbette iki yönlü veritabamı kullanabilirim, ancak kullanıcı girdisinde değil, yalnızca bir tuşa basıldıktan sonra uygulanan başka kısıtlamalar (devre dışı bırakan form öğeleri) var.

cevap

0

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

ile girişine JSON değeri bağlama. ngModel birlikte bir

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

ile bir yönerge olan

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

onlar steno formu Cevabınız için

[(ngModel)]="model" 
+0

Teşekkür destekleyen ama ekleyerek '(ngModelChange) =" model = $ event "' giriş elemanına çalışmıyor. Ayrıca, herhangi bir hata mesajı yoktur. Daha önce de söylediğim gibi, diğer kısıtlamalardan dolayı '[(ngModel)] =" model "' i kullanamıyorum. Ben sadece girdiyi modele bağlamak istiyorum. Model değiştiğinde görünümü güncellemek istiyorum. – Allipon

+1

Eğer 'ngModel' istemez ya da kullanamazsanız, giriş elemanının olaylarının kendisini ' (veya "(bulanıklaştırma)", "(tuşa basma)", ... '(ngModel) gibi yayılan girdilerden başka bir olay yoktur, çünkü" ngModel "olayı olmadığı için hiçbir şey yapmaz.' [(ngModel)] 'sadece çünkü bu özel bir form olduğu için [xxx] = "model" ve "(xxxChange) =" model = $ event "' [(xxx)] = "model" ' –

+0

ile birleştirilebilir. ngModel işi yapabilirdi ... Şimdi kullanıyorum (değiştir). – Allipon