Почему функция переключателя срабатывает, даже если я сниму флажок?

Question

У меня есть кнопка переключения. Когда он проверен ТОЛЬКО, я хочу вызвать функцию. Проблема в том, что он также вызывается, когда я снимаю галочку. Как я могу это исправить?

    <ion-grid class="geoGrid">
          <ion-row justify-content-center align-items-center>
            <ion-col>
              <ion-label position="stacked" class="geoLabel"
                >Use current location</ion-label
              >
            </ion-col>
            <ion-col class="geoToggle">
              <ion-item lines="none">
                <ion-toggle
                  slot="start"
                  name="blueberry"
                  [(ngModel)]="isActive"
                  (ionChange)="getGeoLocation($event)"
                ></ion-toggle>
              </ion-item>
            </ion-col>
          </ion-row>
        </ion-grid>

функция в файле .ts:

      getGeoLocation(event) {
        console.log(event.detail.checked);
        this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp: any) => {
          this.locationPermissionsDenied = false;
          this.geoLatitude = resp.coords.latitude;
          this.geoLongitude = resp.coords.longitude;
          const city = {
            isActive: this.isActive,
            latitude: this.geoLatitude,
            longitude: this.geoLongitude
          };
          console.log(this.isActive);
          this.httpService.changeIsActive(this.isActive);
          this.httpService.changeCity(city);
        }).catch((error) => {
          alert('Error getting location ' + JSON.stringify(error));
        });
      }

Answer 1

Вам просто нужно немного логики c, чтобы увидеть, установлен ли флажок:

getGeoLocation(event) {
        console.log(event.detail.checked);
        if(event.detail.checked) {
            this.geolocation.getCurrentPosition({ maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }).then((resp: any) => {
            this.locationPermissionsDenied = false;
            this.geoLatitude = resp.coords.latitude;
            this.geoLongitude = resp.coords.longitude;
            const city = {
              isActive: this.isActive,
              latitude: this.geoLatitude,
              longitude: this.geoLongitude
            };
            console.log(this.isActive);
            this.httpService.changeIsActive(this.isActive);
            this.httpService.changeCity(city);
          }).catch((error) => {
            alert('Error getting location ' + JSON.stringify(error));
          });
       }
 }

Answer 2

ion-toggle имеет только метод ionChange, который срабатывает при изменении переключателя, независимо от того, отмечен он или нет. Что вы можете сделать, так это проверить внутри своей функции, проверена ли она или нет, а затем обработать оставшуюся часть кода.

Вы связали переключатель с isActive и можете использовать его следующим образом:

getGeoLocation(event) {
  if (isActive) {
    // rest of your code
  }
}