Javascript &引用；未捕获的TypeError:ele.hasAttribute不是函数；在爱奥尼亚2中点击谷歌地图时

在我的应用程序中实现google maps autocomplete之后，我一直在思考如何管理这个错误。我的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>

{{'SEARCHFORM.SELECT'| translate}}
{{'SEARCHFORM.CANCEL'| translate}}
我的位置
{{'SEARCHFORM.SUBMIT'| translate}}

---

在我实现google maps autocomplete之前，这些地图运行良好，但现在只要我点击屏幕上的任何地方，它就会崩溃。有人知道如果有人经历了它为什么会发生吗？有什么可能的解决办法？我的html文件看起来好吗？还是有其他问题。非常感谢

使用

@ViewChild

和

ElementRef

获取角度/角度2中的htmlelements，而不是

文档.getElementById（'autocomplete'）.getElementsByName（'input'）[0]

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

，因为爱奥尼亚将html元素封装在

爱奥尼亚输入

中。检查

在html中，使用

#autocomp

作为元素的id

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

---

参考：，

而不是

文档。getElementById（'autocomplete'）。getElementsByTagName（'input'）[0]

，使用

@ViewChild

和

ElementRef

获取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

，因为爱奥尼亚将html元素封装在

爱奥尼亚输入

中。检查

在html中，使用

#autocomp

作为元素的id

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

---

引用：，

我像你写的那样编辑了我的文件，但现在我没有被捕获（承诺）：类型错误：无法读取未定义类型错误的属性“querySelector”。无法在处读取未定义的属性“querySelector”http://.................. 你知道现在怎么了吗？非常感谢。

console.log（this.aComp）的输出是什么？应用程序：应用程序：自动完成：“关闭”\u自动更正：“关闭”\u自动聚焦辅助：“立即”\u clearInput:false\u componentName:“输入”\u配置：配置\u内容：内容\u禁用：false\u dom:DomController\u元素引用：元素引用\u表单\u项目：项目\u键盘高度：300 \u模式：“md”_native:NativeInput _nav:Tab _platform:platform _renderer:debugdomdrenderer _scrollEnd:Subscriber _scrollStart:Subscriber _type:“text”_useAssist:true _usePadding:true _value:“blur:EventEmitter clearInputYes，它说它未定义。最近的更改似乎有问题。。这行得通吗？我像你写的那样编辑了我的文件，但现在我没有得到任何提示（承诺）：类型错误：无法读取未定义类型错误的属性“querySelector”。无法在处读取未定义的属性“querySelector”http://.................. 你知道现在怎么了吗？非常感谢。
console.log（this.aComp）的输出是什么？应用程序：应用程序：自动完成：“关闭”\u自动更正：“关闭”\u自动聚焦辅助：“立即”\u clearInput:false\u componentName:“输入”\u配置：配置\u内容：内容\u禁用：false\u dom:DomController\u元素引用：元素引用\u表单\u项目：项目\u键盘高度：300 \u模式：“md”_native:NativeInput _nav:Tab _platform:platform _renderer:debugdomdrenderer _scrollEnd:Subscriber _scrollStart:Subscriber _type:“text”_useAssist:true _usePadding:true _value:“blur:EventEmitter clearInputYes，它说它未定义。最近的更改似乎有问题。。这行吗？