属性 'map' 在类型 'MapPage' 上不存在

Question

我正在尝试将 Google 地图插入到基于选项卡模板的 Ionic 2 应用程序中。

在我尝试在构造函数 this.map 方法中初始化之前一切正常。

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
    });
   }

}

现在控制台抛出错误 GET http://localhost:8100/build/js/app.bundle.js

我的终端也有错误：

Error TS2339: Property 'map' does not exist on type 'MapPage'.

发现很多类似的问题 错误 TS2339：属性 'map' 在类型 'Observable'.[=16 上不存在=]

我已经更新了我的 npm - 没有帮助。从我的代码中删除 this.map = null 方法现在不会使我的应用程序正常工作，同样的错误和 ionic serve 命令不会加载我的应用程序（只有它的默认 index.html 页)

如何将属性 'map' 添加到我的 'MapPage' class 以解决问题？我的代码哪里出了问题？

Answer 1

您需要在使用前声明 map 属性:

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
    });
   }

}

属性 'map' 在类型 'MapPage' 上不存在

Property 'map' does not exist on type 'MapPage'

typescript

ionic2

ionic3

angular