2016-04-01 32 views
35

'deki onchange eşdeğeri giriş aralığımın değerini firebase'e kaydetmek için onchange'i kullanıyorum ama işlevimin tanımlanmadığını söyleyen bir hatam var.angular2

bu bu bir varsa, açısal içinde onchange eşdeğer nedir benim html

<ion-item> 
    <ion-row> 
    <ion-col>Rayon <span favorite><strong> {{range}} km</strong></span></ion-col> 
    <ion-col><input type="range" name="points" min="0" max="40" [(ngModel)]="range" onchange="saverange()"></ion-col> 
    </ion-row> 
</ion-item> 

benim işlevi

saverange(){ 
    this.Platform.ready().then(() => { 
    this.rootRef.child("users").child(this.UserID).child('range').set(this.range) 
    }) 
} 

olduğunu. Eğer

+1

'(değiştir: bu çağrıyı kullanarak yerel Dom elemana doğrudan erişim etkinleştirilmesi

(ngModelChange)="range=saverange($event, points)

  • ) ', 5 daha gitmek için –

  • +1

    teşekkür ederim gitmek için 6 daha fazla – PrinceZee

    cevap

    79

    Biz any DOM event yanıt vermek için Angular event bindings kullanabilirsiniz ederiz. Sözdizimi basit. DOM etkinlik adını parantez içinde çevreleriz ve ona bir alıntılanmış şablon ifadesi atarız. - changethe list of standard DOM events üzerinde olduğundan reference

    , bunu kullanabilirsiniz:

    (change)="saverange()" 
    

    belirli durumda, NgModel kullanıyorsanız beri, iki yönlü kırmak olabilir artık şöyle bağlayıcı: Sonra

    [ngModel]="range" (ngModelChange)="saverange($event)" 
    

    saverange(newValue) { 
        this.range = newValue; 
        this.Platform.ready().then(() => { 
        this.rootRef.child("users").child(this.UserID).child('range').set(this.range) 
        }) 
    } 
    

    Ancak, bu yaklaşım saverange() ile her tuş vuruşuyla çağrılır, bu nedenle (change)'u kullanmanız daha iyi olur.

    2

    @Mark Rajcok, bir dizi tipi girişi içeren iyon projeleri için mükemmel bir çözüm verdi.

    olmayan iyon projelerinin başka bir durumda bu önerir:

    HTML:

    <input type="text" name="points" #points maxlength="8" [(ngModel)]="range" (ngModelChange)="range=saverange($event, points)"> 
    

    Bileşen:

    onChangeAchievement(eventStr: string, eRef): string { 
    
         //Do something (some manipulations) on input and than return it to be saved: 
    
         //In case you need to force of modifing the Element-Reference value on-focus of input: 
         var eventStrToReplace = eventStr.replace(/[^0-9,eE\.\+]+/g, ""); 
         if (eventStr != eventStrToReplace) { 
          eRef.value = eventStrToReplace; 
         } 
    
         return this.getNumberOnChange(eventStr); 
    
        } 
    

    burada fikir:

    1. (ngModelChange) yöntemi Letting Setter işi yapmak için:

      eRef.value = eventStrToReplace;