각도 2 : 변수의 값이 변경되지 않는 부트 스트랩 스위치

Question

내 Angular 2 애플리케이션의 확인란에 부트 스톱 스위치를 사용하고 있습니다. 스위치를 클릭하면 내 클래스의 변수 LightNeeded의 값을 변경해야합니다. 나는 다음과 같은 코드가 있습니다 :

HTML :

<input class="bootstrap-switch light-needed" name="LightNeeded" type="checkbox" [(ngModel)]="LightNeeded"> 

타이프 스크립트 파일 :

LightNeeded: boolean; 

ngOnInit(): void {   
    // Invoke bootstrap switches 
    $('.bootstrap-switch').bootstrapSwitch({ 
     onText: "Yes", 
     offText: "No" 
    }); 
    this.changeBootstrapSwitchValues(); 
} 

changeBootstrapSwitchValues() { 
    $('.light-needed').on('switchChange.bootstrapSwitch', function (event:any, state:any) { 
     if (state) { 
      console.log('true'); 
      this.LightNeeded= true; 
     } else { 
      console.log('false'); 
      this.LightNeeded= false; 
     }; 
    }); 
} 

스위치가 true 인 경우, 성공적 콘솔에 충실 기록합니다. false이면 콘솔에 false를 성공적으로 기록합니다. 그러나 내 LightNeeded 변수의 값을 절대로 변경하지 않습니다.

의심 '이'사용 :

내가 this.LightNeeded의 this 동안, 나는 다음과 같은 경고 얻을 가져

현재 상황에서이 '이'가 아니라 포함하는 클래스로, 로컬 기능을 말합니다.

어떻게 내가 의도하고있는 방식으로 작동하고 내 LightNeeded 변수의 값을 변경 this을받을 수 있나요? 나는 다른 접근 방식을 택하는 것에 대해서도 개방적이다. 입력에 [attr.checked]="LightNeeded? true : null"을 추가하려고 시도했지만 작동하지 않았습니다.

편집 : 그것은 간단한 확인란이 때

[(ngModel)]="LightNeeded"을 추가하는 바인딩 양방향 작동했지만 어떤 이유로 부트 스트랩 스위치 플러그인이 양방향 바인딩을 나누기. JQuery Inputmask 및 JQuery UI Datepicker와 같은 다른 플러그인도 양방향 바인딩을 중단합니다.

Answer 1

이벤트 처리기 함수가 this의 컨텍스트를 변경합니다. 대신 문맥/바인딩을 변경하지 않는 화살표 함수를 사용해야합니다.

$('.light-needed').on('switchChange.bootstrapSwitch', (event:any, state:any) => { 
     if (state) { 
      console.log('true'); 
      this.LightNeeded= true; 
     } else { 
      console.log('false'); 
      this.LightNeeded= false; 
     }; 
    }); 

Answer 2

어쩌면 말에하지만 난이 사람이 그것을 확인하려면 jw-boostrap-switch-ng2라고 angular2 +에 대한 구성 요소를 만든 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

예를 참조하십시오.

JQUERY에 대해 걱정할 필요가 없기 때문에 구성 요소를 구현하는 더 좋은 솔루션입니다.

Answer 3

모든 기능 범위가 있습니다. changeBootstrapSwitchValues() 함수 내의 this 키워드는 JQuery 객체를 참조합니다. 다음 기술을 사용하여이 문제를 해결할 수 있습니다.

changeBootstrapSwitchValues() { 
let self = this; 
    $('.light-needed').on('switchChange.bootstrapSwitch', function (event:any, state:any) { 
     if (state) { 
      console.log('true'); 
      //this.LightNeeded= true; 
      self.LightNeeded= true; 
     } else { 
      console.log('false'); 
      //this.LightNeeded= false; 
      self.LightNeeded= false; 
     }; 
    }); 
}