在 Ionic 2 中单击谷歌地图时出现“未捕获的 TypeError：ele.hasAttribute 不是函数”

Question

在我的应用程序中实现谷歌地图自动完成后，我一直在弄清楚如何管理这个错误。我的 maps.ts 文件看起来像 ;

import { Component, NgZone } from "@angular/core";
import {AlertController, NavController, Platform, NavParams,ModalController } from 'ionic-angular';
import { GoogleMap, GoogleMapsEvent, GoogleMapsLatLng, GoogleMapsMarkerOptions, CameraPosition } from 'ionic-native';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Geolocation } from 'ionic-native';
declare var google:any;
declare var window: any;
import {MapsAPILoader} from 'angular2-google-maps/core';
import { ConnectivityService } from '../../providers/connectivity-service';


@Component({
  selector: 'maps-page',
  templateUrl: 'maps.html'
})
export class MapsPage {
    map: any;
    firstTime : boolean = true;
    isDisplayOfflineMode : boolean = false;
  //private map: GoogleMap;

  constructor(private _navController: NavController,
    private zone: NgZone,
    private  _loader : MapsAPILoader,
    private connectivityService:ConnectivityService,
    private platform: Platform,
    public navParams: NavParams,
    public modalCtrl:ModalController,
    private alert : AlertController,
    private _zone: NgZone) {

    this.platform.ready().then(() => this.onPlatformReady());
    this.map = {
            lat: 0,
            lng: 0,
            zoom: 15
        };
        this.platform.ready().then(() => this.onPlatformReady());
        this.NetworkConnectivity();
  }
  private onPlatformReady(): void {

  }


  ngAfterViewInit() {
    GoogleMap.isAvailable().then(() => {
      this.map = new GoogleMap('map_canvas');
      this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
        this._zone.run(() => {
          let myPosition = new GoogleMapsLatLng(45.495586, -73.574709);
          let position: CameraPosition = {
            target: myPosition,
            zoom: 15
          };
          console.log("My position is", myPosition);
          this.map.moveCamera(position);
        });

      });
    });
  }


  submit() {
    let that = this;
    this.map.getCameraPosition().then(res => {
      let callback = that.navParams.get("callback")
      callback(res.target).then(() => {
        this._navController.pop();
      });
    })
  }
  dismiss() {
    this._navController.pop()
  }


    NetworkConnectivity(){
        setInterval(() => {
            if(this.connectivityService.isOnline()){

                if (this.firstTime)
                {
                    this.loadMap();
                    this.autocomplete()
                }

            } else {
                if(!this.isDisplayOfflineMode)
                    this.displayOffline();

            }
        }, 2000);


    }

    displayOffline() {
        this.isDisplayOfflineMode = true;
        let alert = this.alert.create({
            title: 'Network connectivity',
            subTitle: 'Offline',
            buttons: [{
                text : 'Retry',
                handler: () => {
                    this.isDisplayOfflineMode = false;
                }
            }]

        });
        alert.present();
    }


    autocomplete() {
        this._loader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete( document.getElementById('autocomplete').getElementsByTagName('input')[0], {});
            google.maps.event.addListener(autocomplete, 'place_changed', () => {
                let place = autocomplete.getPlace();
                this.map.lat  = place.geometry.location.lat();
                this.map.lng = place.geometry.location.lng();
                console.log(place);
            });
        });
    }


    loadMap(){

        Geolocation.getCurrentPosition().then((position) => {

            this.map = {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
                zoom: 15
            };
            this.firstTime = false;
        }, (err) => {
        });

    }

   getDirections() { 
    window.location = `geo:${this.map.lat},${this.map.lng};u=35`; 
  }


}

我的 html 文件看起来像；

<ion-header>
  <ion-toolbar>
    <ion-title>
      {{'SEARCHFORM.SELECT' | translate}}
    </ion-title>
    <ion-buttons start>
      <button ion-button (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">{{'SEARCHFORM.CANCEL' | translate}}</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-fab left bottom>
        <button ion-fab class="fab-map" (click)="getDirections()">
            <ion-icon name="navigate"></ion-icon>
        </button>
    </ion-fab>

    <ion-item>
        <ion-input id="autocomplete" type="text" name="title" placeholder="Enter Address"></ion-input>
    </ion-item>

    <sebm-google-map id="map" [latitude]="map.lat" [longitude]="map.lng" [zoom]="map.zoom" >
        <sebm-google-map-marker [latitude]="map.lat" [longitude]="map.lng">
            <sebm-google-map-info-window>
                <strong>My location</strong>
            </sebm-google-map-info-window>
        </sebm-google-map-marker>
    </sebm-google-map>
  <div style="height: 100%;" id="map_canvas"></div>
</ion-content>
<ion-footer>
     <button ion-button (click)="submit()">{{'SEARCHFORM.SUBMIT' | translate}}</button>
</ion-footer>

在我实施谷歌地图自动完成之前，地图工作正常，但现在只要我点击屏幕上的任意位置，它就会崩溃。如果有人经历过它，有谁知道为什么会发生这种情况以及可能的解决方案是什么？我的 html 文件看起来不错吗？还是有其他问题。非常感谢！！

Answer 1

使用@ViewChild 和ElementRef 代替document.getElementById('autocomplete').getElementsByTagName('input')[0] 在Angular/Ionic 2 中获取htmlelements。

import {ViewChild,ElementRef} from '@angular/core';

@Component({
  selector: 'maps-page',
  templateUrl: 'maps.html'
})
export class MapsPage {
  @ViewChild('autocomp')
  aComplete:ElementRef;

  //...
    autocomplete() {
        this._loader.load().then(() => {
            let autocomplete = new google.maps.places.Autocomplete(this.aComplete.nativeElement.querySelector('input'));

您需要使用querySelector，因为ionic 将html 元素封装在ion-input 中。检查this answer

在您的 html 中，使用 #autocomp 作为元素的 id。

<ion-input #autocomp id="autocomplete" type="text" name="title" placeholder="Enter Address"></ion-input>

参考：ElementRef,ViewChild