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}

这里发生了什么？为什么阵列没有插入存储？ app.module.ts中的所有内容都是正确的。关于为什么这不能正常工作的任何想法？

编辑：我添加了标题以获取更多信息。如果还需要其他任何内容，请在评论中告诉我。编辑＃2：我添加了数组应该是什么样子。

Answer 1

尝试这样做以查看输出。

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

而不是console.log(this.storage.get('launches'));，因为它会像您提到的那样返回promise。

看着你的控制台输出，在我看来可能会将对象序列化为字符串可能会修复它（不确定，但你可以尝试）。试试这个以保存数据。

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

然后在get回来时将其解析回来，

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

试试看是否有效。

Answer 2

Ionic的StorageModule似乎是一个错误，它使用LocalForage作为基础。

Ionic 3 forEach array to storage - 发生了什么？

2 个答案: