2017-09-20 1 views
0

이 번거로운 배열을 처리하는 데 문제가 있습니다. 여기에 관련 코드가 있습니다.이오닉 3 for each storage to storage - 무슨 일이야?

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 편집 : 배열의 모양을 추가했습니다.

+0

'저장소'란 무엇입니까? –

+0

"storage"는 Ionic Storage 모듈입니다. –

답변

0

출력을 보려면이 작업을 시도하십시오.

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

대신 당신이 언급 한대로이 promise을 반환로 console.log(this.storage.get('launches'));

.

콘솔 출력을 보면 내게 문자열로 객체를 직렬화하는 것이 좋을지 모르겠지만 시도 할 수있는 것 같습니다. 데이터를 저장하려고 시도해보십시오.

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

다음 때 get 팅 다시,

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

시도 그것을 다시 분석하고 그 작동되는지 확인합니다.

+0

내가 말한 것처럼 빈 배열을 반환합니다. –

+0

'this.launchArray'가 어떻게 생겼는지 샘플을 보여줄 수 있습니까? – amal

+0

자, 자. 희망을 당신이 솔루션을 찾을 수 있도록 –

0

LocalForage를 기본으로 사용하는 Ionic의 StorageModule에서 문제가있는 것 같습니다.