类型“MapPage”上不存在属性“地图”答案

【问题标题】：Property 'map' does not exist on type 'MapPage'类型“MapPage”上不存在属性“地图”
【发布时间】：2017-01-11 22:17:09
【问题描述】：

我正在尝试基于 Tabs 模板将 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

我的终端也有错误：

错误 TS2339：“MapPage”类型上不存在属性“map”。

发现很多类似的问题错误 TS2339: 属性 'map' 不存在于类型 'Observable' 上。

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

如何将该属性“地图”添加到我的“地图页面”类以解决问题？我的代码做错了什么？

【问题讨论】：

标签： angular typescript ionic2 ionic3

【解决方案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
    });
   }

}

【讨论】：