[angular] angular2에 해당하는 onchange

Program / 글쓴이

내 입력 범위의 값을 firebase에 저장하기 위해 onchange를 사용하고 있지만 내 함수가 정의되지 않았다는 오류가 있습니다.

이것은 내 기능입니다

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

이것은 내 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>

존재하는 경우 angular의 onchange와 동등한 것은 무엇입니까? 감사합니다

답변

Angular 이벤트 바인딩 을 사용 하여 모든 DOM 이벤트 에 응답 할 수 있습니다 . 구문은 간단합니다. DOM 이벤트 이름을 괄호로 묶고 인용 된 템플릿 문을 할당합니다. – 참조

이후 change에 표준 DOM 이벤트의 목록 , 우리는 그것을 사용할 수 있습니다 :

(change)="saverange()"

특정 경우에는 NgModel을 사용하고 있으므로 대신 다음과 같이 양방향 바인딩을 분리 할 수 ​​있습니다.

[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)
  })
}

그러나이 접근 방식 saverange()은 모든 키 입력과 함께 호출되므로 (change).

답변

Angular에서는 event listeners아래 예제와 같이 정의 할 수 있습니다.

<!-- Here you can call public methods from parental component -->
<input (change)="method_name()">

답변

@Mark Rajcok은 범위 유형 입력을 포함하는 이온 프로젝트를위한 훌륭한 솔루션을 제공했습니다.

비 이온 프로젝트의 다른 경우에는 다음을 제안합니다.

HTML :

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

구성 요소:

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

    }

여기에 아이디어 :

  1. 시키는 (ngModelChange)방법은 세터 작업을 수행하는 :

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

  2. 다음 호출을 사용하여 기본 Dom 요소에 직접 액세스 할 수 있도록합니다.

    eRef.value = eventStrToReplace;

답변