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

Posted 2023-03-16

【中文标题】离子切换按钮不显示正确的切换 - Ionic 3，Angular 4

【英文标题】：Ion-toggle button does not show correct toggle - Ionic 3, Angular 4

【发布时间】：2018-05-08 15:05:47

【问题描述】：

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

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

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

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

toggle 值正确，绑定值也正确。

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>

【问题讨论】：

那么你在导航到页面时如何设置值？没有足够的代码来重现这个问题 ;)

能否请您添加整个页面的代码，以便我们看看这些项目是如何初始化的？

@sebaferreras 单独的 2 路绑定并不能解决问题，我不得不添加这些：storageStatus: string = window.localStorage.getItem('item'); 出于某种原因，我不能使用布尔值，但字符串，因为存储在 localStorage 中的东西在字符串中

我会将ion-toggle 值保存为布尔值而不是字符串。您可以在获取值时转换本地存储字符串，也可以在设置值时转换。

【参考方案1】：

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

更改[checked]="storageStatus"

到[(ngModel)]="storageStatus"

我是这样使用的：

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

【讨论】：

这就是我最初所做的，然后转向单向绑定。我将退回到2路绑定。你能告诉我这里的 settings.showIcon 是什么吗？我需要这个吗：(ionChange)="updateItem()" 你能在<ion-toggle> 标签和打字稿文件中准确说明需要做什么吗？

您不需要 ionChange 侦听器，因为双向绑定将为您完成更改布尔值的工作。

【参考方案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);

  

【讨论】：

" == true?true:false" 拯救了我的夜晚...谢谢！