为什么即使我取消选中切换，切换按钮功能也会被触发？

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

ion-toggle 只有 ionChange 方法，当切换开关被选中或未选中时，该方法会触发。您可以做的是检查函数内部是否选中或取消选中，然后处理其余代码。

您已将开关与 isActive 绑定，您可以像这样使用它：

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

Answer 2

您只需要一些逻辑来查看该框是否被选中：

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

为什么即使我取消选中切换，切换按钮功能也会被触发？

Why toggle button function is fired even if I uncheck toggle?

ionic-framework

angular-ngmodel

angular

ionic4