整个代码 - 更新

Question

我定义了离子切换，我为它设置了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 （当app将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>

Answer 1

只使用双向数据绑定而不是单向，并使用ngModel而不是检查。

更改[checked]="storageStatus"

到[(ngModel)]="storageStatus"

我正在使用它如下：

<ion-toggle checked="false" [(ngModel)]="settings.showIcon"></ion-toggle>

Answer 2

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

您需要同时使用两种方式绑定和checked。

页面初始化时，您必须检查localstorage中的当前值。

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

  }

离子切换按钮未显示正确的切换 - Ionic 3，Angular 4

整个代码 - 更新

2 个答案: