1

我已经定义了我的 ion-toggle，并为它设置了 2 个属性，如下所示：

<ion-toggle [checked]="storageStatus" (ionChange)="updateItem()"></ion-toggle>

一切正常，我可以切换和更改 localStorage 的值等等。但我不确定为什么切换按钮会回到关闭状态（或错误状态）。当我移动到另一页并卷土重来时。

只有“视觉”显示的切换按钮会下降到关闭状态，而不是值。我希望按钮在切换时处于我在 localStorage 中设置的状态。

切换值是正确的，因此绑定值也是正确的。

storageStatus: any;

updateItem(){
  this.storageStatus = !this.storageStatus;
  window.localStorage.setItem('item', this.storageStatus);
}

完整代码 - 更新

下面的解决方案现在对我有用。我不确定它是否是一个好方法。

app.component.ts（当应用加载 setItem 为 true 时）

ngOnInit() {
  window.localStorage.setItem('item', 'true');
}

打字稿文件

import { Component} from '@angular/core';
import { NavController, NavParams, ToastController } from 'ionic-angular';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html',
})
export class SettingsPage{

  constructor(public navCtrl: NavController, public navParams: NavParams, private toastCtrl: ToastController) {
  }

  //THIS IS THE LINE THAT DID THE TRICK OF SHOWING ION-TOGGLE AS PER item value
  storageStatus: string = window.localStorage.getItem('item');

  updateItem(){
    window.localStorage.setItem('item', this.storageStatus);
    this.presentToast();

  }


    presentToast() {
      console.log("present Toast");
      const toast = this.toastCtrl.create({
      message: 'New Changes Updated',
      duration: 3000,
      position: 'bottom'
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();
  }
}

.html 文件

<ion-content padding>
    <ion-item-group>
    <ion-item>
      <ion-label>Item Status</ion-label>
     <ion-toggle [(ngModel)]="storageStatus"></ion-toggle>
    </ion-item>

    </ion-item-group>
    <button ion-button block color="light" (click)="updateItem()">Save Changes</button>

</ion-content>
4

2 回答 2

2

我认为 marvstar 给出了正确的答案，但解决方案不合适。

您需要同时使用双向绑定和checked.

当页面初始化时，您必须检查本地存储中的当前值。

ngOnInit(){
  this.storageStatus=localstorage.getItem('item');
}

在 HTML 中：添加条件[checked] 

<ion-toggle [checked]="storageStatus == true?true:false"  [(ngModel)]="storageStatus" (ionChange)="eventChange($event)" ></ion-toggle>

在 TS 文件中添加 eventChange 方法并使用 $event 来使用实际的切换值：

 eventChange(toggleValue){
     console.log(toggleValue._value)
     if(toggleValue._value==true){
       let i=true;
     }else if(toggleValue._value==false){
       let i=false;
     }

    localStorage.setItem('storageItem',i);

  }
于 2019-10-17T05:11:21.340 回答
1

只需使用两种方式数据绑定而不是一种方式，并使用 ngModel 而不是检查。

改变[checked]="storageStatus"

至[(ngModel)]="storageStatus"

我使用它如下：

<ion-toggle checked="false" [(ngModel)]="settings.showIcon"></ion-toggle>
于 2017-11-24T15:25:37.540 回答