修复TS2345：无法将类型“ HTMLElement”的参数分配给类型“ HTMLInputElement”的参数

187

卢西安·杜波依斯（Lucien Dubois）

我正在尝试在新的Ionic应用程序中设置Google Maps Places Autocomplete。

这是问题所在。在第一次搜索中，我在控制台中收到此错误：

TypeError: Cannot read property 'place_id' of undefined

和终端中的此错误：

TS2345: Argument of type 'HTMLElement' is not assignable to parameter of type 'HTMLInputElement'

但是，在第二次搜索中，我得到了place_id而没有任何错误。

这是我的（简化）.ts文件

import { Component, OnInit } from '@angular/core';
import { google } from "google-maps";
import { Platform } from '@ionic/angular';

@Component({...})
export class AddaddressPage implements OnInit {

  autocomplete:any;

  constructor(public platform: Platform) {}

    ngOnInit() {
        this.platform.ready().then(() => {
            this.autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
            this.autocomplete.setFields(['place_id']);
        });
    }

    fillInAddress() {
      var place = this.autocomplete.getPlace();
      console.log(place);
      console.log(place.place_id);
    }

}

和我使用的输入：

<input id="autocomplete" type="text" (change)="fillInAddress()" />

我应该如何进行？

卢西安·杜波依斯（Lucien Dubois）

玩了之后，这是把戏！需要ViewChild和离子输入。

.html

<ion-input #autocomplete type="text"></ion-input>

.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { google } from "google-maps";
import { Platform } from '@ionic/angular';

@Component(...)
export class AddaddressPage implements OnInit {

  googleAutocomplete:any;

  @ViewChild('autocomplete') autocompleteInput: ElementRef;

  constructor(public platform: Platform) {  }

    ngOnInit() {
        this.platform.ready().then(() => {
            this.autocompleteInput.getInputElement().then((el)=>{
                this.googleAutocomplete = new google.maps.places.Autocomplete(el);
                this.googleAutocomplete.setFields(['place_id']);
                this.googleAutocomplete.addListener('place_changed', () => {
                    var place = this.googleAutocomplete.getPlace();
                    console.log(place);
                    console.log(place.place_id);
                });
            })

        });
    }

}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。