Property 'map' existiert nicht für den Typ 'MapPage'

Question

Ich versuche Google Maps in meine Ionic 2-Anwendung basierend auf der Tabs-Vorlage einzufügen.

Alles hatte gut funktioniert, bevor ich versuchte, in Konstruktorfunktion this.map Methode zu initialisieren.

import {Component} from '@angular/core'; 
import {Geolocation} from 'ionic-native'; 
import {NavController} from 'ionic-angular'; 

@Component({ 
    templateUrl: 'build/pages/map/map.html' 
}) 
export class MapPage { 
    constructor(private navCtrl: NavController) { 

    this.map = null; 

    this.loadMap(); 

    } 

    loadMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     scrollwheel: false, 
     zoom: 8 
    }); 
    } 

} 

Jetzt Konsole wirft ein Fehler http://localhost:8100/build/js/app.bundle.js

GET Und es gibt auch ein Fehler in meinem Terminal:

Fehler TS2339: Eigenschaft 'Karte' existiert nicht auf Typ ‚MapPage ".

gefunden viele ähnliche Fälle mit einem Problem Fehler TS2339: Property ‚Karte‘ existiert nicht auf Typ ‚beobachtbar‘.

Ich habe meine NPM aktualisiert - hat nicht geholfen. Entfernen this.map = null Methode von meinem Code jetzt nicht meinen app Arbeits machen, den gleichen Fehler und Befehl ionischem dienen nicht meinen app laden (nur den Standard index.html Seite)

Wie füge ich diese Map 'Property' meiner Klasse 'MapPage' hinzu, um das Problem zu lösen? Was wurde in meinem Code falsch gemacht?

Answer 1

Sie müssen die map Eigenschaft erklären, bevor es zu benutzen:

import {Component} from '@angular/core'; 
import {Geolocation} from 'ionic-native'; 
import {NavController} from 'ionic-angular'; 

@Component({ 
    templateUrl: 'build/pages/map/map.html' 
}) 
export class MapPage { 

    private map: any; // <- declare the variable 

    constructor(private navCtrl: NavController) { 

    this.map = null; // <- Now the variable exists so you can initialize it 

    this.loadMap(); 

    } 

    loadMap() { 
     // Instead of using a new variable, use this.map to use the existing map property 
     this.map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     scrollwheel: false, 
     zoom: 8 
    }); 
    } 

}