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

我已经定义了ion切换，并为其设置了2个属性，如下所示：

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

整个代码-更新 下面的解决方案现在对我有效。我不确定这是否是一个好方法。

app.component.ts（当app将setItem加载为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();
  }
}

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

html文件

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

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

项目状态
保存更改

只需使用双向数据绑定而不是单向数据绑定，并使用ngModel而不是checked

更改

[选中]=“存储状态”

至

[（ngModel）]=“存储状态”

我使用它的方式如下：

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

---

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

您需要同时使用双向绑定和选中的

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

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

在HTML中：在

[选中]

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

---

这就是我最初做的，然后转向单向绑定。我将退回到双向绑定。你能告诉我什么是settings.showIcon吗？我需要这个：

（ionChange）=“updateItem（）”

您可以准确地显示在

标记和typescript文件中需要做什么。您不需要ionChange侦听器，因为双向绑定将为您更改布尔值。那么，在导航到页面时如何设置该值？没有足够的代码来重现此问题；）请您添加整个页面的代码，这样我们可以看看这些项是如何初始化的吗？@sebafereras双向绑定本身并没有起作用，我必须添加以下内容：

storageStatus:string=window.localStorage.getItem（'item'）由于某些原因，我不能使用布尔值，但是字符串，因为存储在localStorage中的东西都在字符串中，我会将
离子切换
值保存为布尔值，而不是字符串。您可以在获取值以及设置值时转换localestorage字符串。“==true？true:false”保存了我的夜晚。。。非常感谢。
 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);

  }