离子3 Cordova本地存储存储修改后的数据

Question

我正在努力解决一些问题。这是相关代码。

types.json

{
    "types": [ 
        {"name": "Lateral Aids in Navigation", "enabled": false},
        {"name": "Canal Structures", "enabled": true},
        {"name": "Dockage", "enabled": true},
        {"name": "Launch Points", "enabled": true},
        {"name": "Landmarks", "enabled": true}
            ] 
}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Http } from '@angular/http';
import { NativeStorage } from '@ionic-native/native-storage';
import { TabsPage } from '../pages/tabs/tabs';
import 'rxjs/add/operator/toPromise';

@Component({
  templateUrl: 'app.html'
})
export class CanalGuide {
  rootPage:any = TabsPage;
  public types;
  public places;
  constructor(public http: Http, public platform: Platform, public 
statusBar: StatusBar, public splashScreen: SplashScreen, public nativeStorage: 
NativeStorage) {
      platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();  
      this.readyTypes();
      this.readyPlaces();
      splashScreen.hide();
      });
    }
    readyTypes() { return this.http.get('./assets/data/types.json').toPromise().then(
        (types) => { this.nativeStorage.setItem('types', types) }); 
      }
    readyPlaces() { return this.http.get('./assets/data/canalwatertrail.json').toPromise().then(
      (places) => { this.nativeStorage.setItem('places', places) });
      }
  }

settings.ts

 import { Component } from '@angular/core';
 import { Http } from '@angular/http';
 import { NavController } from 'ionic-angular';
 import { NativeStorage } from '@ionic-native/native-storage';
@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html'
})
export class SettingsPage {
public toggles;
public types;
constructor(private http: Http, public navCtrl: NavController, public 
nativeStorage: NativeStorage) {}
ionViewDidEnter() {
    this.nativeStorage.getItem('types').then((data) => {
      this.toggles = JSON.parse(data._body) 
      console.log(this.toggles);  
      });
    }
// The relevant code 
ionViewWillLeave() {
  this.nativeStorage.setItem('types', this.toggles);
  console.log(this.nativeStorage.getItem('types'));
    }
 }

settings.html

  <ion-header>
   <ion-navbar>
    <ion-title>
     Settings
    </ion-title>
  </ion-navbar>
 </ion-header>
 <ion-content>
  <ion-list no-lines *ngIf="toggles">
   <ion-list-header>Atlas Filters</ion-list-header>
     <ion-item *ngFor="let type of toggles.types">
       <ion-label>{{type.name}} - {{type.enabled}}</ion-label>
       <ion-toggle [(ngModel)]="type.enabled"></ion-toggle>
    </ion-item>  
  </ion-list>

我的问题是 - ionViewWillLeave中的console.log()返回以下内容：

t {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
__zone_symbol__state
:
true
__zone_symbol__value
:
{types: Array(5)}
__proto__
:
Object

现在，在ionicViewWillLeave函数中，如何将修改正确地保存到types.json中，以便将其再次用于本机存储，以便可以与nativeStorage.getItem一起在A 不同的页面上使用？这个看似简单的功能已经使我发疯了一段时间。

Answer 1

请看一下文档：https：//ionicframework.com/docs/native/native/native-storage/

getItem和setItem返回承诺，因此您不能简单地记录它。您必须等到诺言得到解决。

this.nativeStorage.setItem('types', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

或

this.nativeStorage.getItem('types')
  .then(
    data => console.log(data),
    error => console.error(error)
  );