Ionic 3 for each storage to storage - 何が起こっているのですか？

Question

この面倒な配列を扱うのに問題があります。関連するコードは次のとおりです。ここで

home.ts

import { Component, ViewChild } from '@angular/core'; 
import { Platform, NavController } from 'ionic-angular'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/observable/forkJoin'; 
import { Storage } from '@ionic/storage'; 

import { 
GoogleMaps, 
GoogleMap, 
GoogleMapsEvent, 
LatLng, 
MarkerOptions, 
Marker 
} from '@ionic-native/google-maps'; 
import { DetailsPage } from '../details/details'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
}) 
export class HomePage { 
    @ViewChild('map') element; 

    public types; 
    public places; 
    public landmarks; 
    public launches; 
    public structures; 
    public docks; 
    public landmarkArray: any[] = []; 
    public launchArray: any[] = []; 

    constructor(public navCtrl: NavController, public http: Http, private googleMaps: GoogleMaps, public storage: Storage) { 
    this.storage.get('places').then(
     data => { 
      this.places = data; 
      this.initMap(this.places); 
     }, 
     error => { console.log('Error:', error); } 
    ); 
    } 
    // Gets json file and prepares to create markers 


initMap(places) { 
    // Creates map element 
    let map: GoogleMap = this.googleMaps.create(this.element.nativeElement); 
map.one(GoogleMapsEvent.MAP_READY).then((data: any) => { 
// Places boat launch markers 
     places.places.boatlaunches.boatlaunch.forEach((boatlaunch) => { 


     // Sets coordinates for marker 
     let coordinates: LatLng = new LatLng(boatlaunch.latitude, boatlaunch.longitude); 

     // Sets snippet content 
     let snippetContent: string = boatlaunch.waterway + ', mile ' + boatlaunch.mile; 

     // Sets marker options 
     let markerOptions: MarkerOptions = { 
      position: coordinates, 
      icon: "assets/images/symbols/green_pin.png", 
      title: boatlaunch.site_name, 
      snippet: snippetContent, 
     }; 

     // Adds marker, pushes to array then creates event listener for detail parameters 
     map.addMarker(markerOptions).then((marker: Marker) => { 
     marker.addEventListener(GoogleMapsEvent.INFO_CLICK).subscribe(e => { 
      var siteParams = { 
      location_case: "1", 
      site_name: boatlaunch.site_name, 
      waterway: boatlaunch.waterway, 
      id: boatlaunch.id, 
      municipality: boatlaunch.municipality, 
      launch_type: boatlaunch.launch_type, 
      parking: boatlaunch.parking, 
      overnight_parking: boatlaunch.overnight_parking, 
      camping: boatlaunch.camping, 
      potable_water: boatlaunch.potable_water, 
      restrooms: boatlaunch.restrooms, 
      day_use_amenities: boatlaunch.day_use_amenities, 
      portage_distance: boatlaunch.portage_distance, 
      latitude: boatlaunch.latitude, 
      longitude: boatlaunch.longitude, 
      mile: boatlaunch.mile, 
      shore: boatlaunch.shore, 
      bodyofwater: boatlaunch.bodyofwater 
      }; 
      this.navCtrl.push(DetailsPage, siteParams); 
     }); 
     this.launchArray.push(marker); 
      }); 
     }); 
}); 
     console.log(this.launchArray); // returns Array of Google Map markers 
     var launches = this.launchArray; 
     console.log(launches); // returns Array of Google Map markers 
     this.storage.set('launches', launches); 
     // returns a Promise of an empty array 
     console.log(this.storage.get('launches')); 
} 

はconsole.log(launches)の結果のフラグメントです：

0: Marker {_map: GoogleMap, _objectInstance: Marker} 
1: Marker {_map: GoogleMap, _objectInstance: Marker} 
2: Marker {_map: GoogleMap, _objectInstance: Marker} 
3: Marker {_map: GoogleMap, _objectInstance: Marker} 
4: Marker {_map: GoogleMap, _objectInstance: Marker} 
5: Marker {_map: GoogleMap, _objectInstance: Marker} 
6: Marker {_map: GoogleMap, _objectInstance: Marker} 
7: Marker {_map: GoogleMap, _objectInstance: Marker} 
... 
150:Marker {_map: GoogleMap, _objectInstance: Marker} 

ここで何が起こっていますか？アレイがStorageに挿入されないのはなぜですか？ app.module.tsのすべてが正しいです。なぜこれが適切に動作していないのかについてのアイデアはありますか？

編集：追加情報のヘッダーを追加しました。他に何かが必要な場合は、コメントに私に教えてください。 編集＃2：アレイの外観を追加しました。

Answer 1

これを試して、出力を確認してください。

this.storage.get('launches').then((val) => { 
    console.log(val); 
}); 

の代わりに、あなたが述べたように、それはpromiseを返すようconsole.log(this.storage.get('launches'));

。

あなたのコンソールの出力を見ると、オブジェクトを文字列にシリアル化している可能性があります（確かではありませんが、試してみてください）。これを試してデータを保存してください。 getティンが戻って、

this.storage.get('launches').then((val) => { 
    console.log(JSON.parse(val)); 
}); 

は試してみて、それが動作するかどうかを確認するとき

this.storage.set('launches', JSON.stringify(launches)); 

それをバック解析。

Answer 2

LocalForageをベースに使用するIonicのStorageModuleで問題が発生しているようです。