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

【问题标题】：Why toggle button function is fired even if I uncheck toggle?即使我取消选中切换，为什么会触发切换按钮功能？
【发布时间】：2020-05-12 21:40:53
【问题描述】：

我有一个切换按钮。当它只被选中时，我想调用一个函数。问题是当我取消选中它时它也会被调用。我该如何解决？

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

【问题讨论】：

在哪里验证是否检查调用函数？
在getGeoLocation开头添加if (!event.detail.checked) return;
@Powkachu 我试图在函数内部验证它但不起作用。有什么解决办法吗？
@Powkachu 试过了，还是不行。
console.log(event.detail.checked); 时会打印什么？

标签： angular ionic-framework ionic4 angular-ngmodel

【解决方案1】：

ion-toggle 仅具有 ionChange 方法，该方法在切换切换时触发，无论是选中还是未选中。您可以做的是检查函数内部是否选中或取消选中，然后处理其余代码。

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

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

【讨论】：

【解决方案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));
          });
       }
 }

【讨论】：