TypeError:无法读取未定义的属性“自动完成”

时间:2020-06-14 21:15:09

标签: angular typeerror google-places-api

错误错误:未捕获(承诺):TypeError:无法读取未定义的属性“自动完成” TypeError:无法读取未定义的属性“自动完成”

当我运行Angular Application时,此错误不断弹出。它说第25行的search.component.ts文件出了点​​问题。这是我的搜索组件

    /// <reference types="@types/googlemaps" />
import { Component, OnInit, ViewChild, ElementRef, NgZone } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MapsAPILoader } from '@agm/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
})
export class SearchComponent implements OnInit {

  autocomplete: any;
  @ViewChild('search')
  public searchElementRef: ElementRef;
  public searchControl: FormControl;

  constructor(private zone: NgZone, 
    private mapsAPILoader: MapsAPILoader) { }

  ngOnInit() {
    this.searchControl = new FormControl();

    this.mapsAPILoader.load().then(() => {
        let autocomplete = new window['google'].maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: [],
        componentRestrictions: {'country': 'US'}
      });
      autocomplete.addListener('place_changed', () => {
        this.zone.run(() => {
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          this.searchControl.reset();
        });
      });
    });
  }
}

如何解决此错误?

预先感谢

1 个答案:

答案 0 :(得分:0)

如果应用程序编译正常但出现错误,则为TS Lint错误。这是因为Lint找不到使用点.运算符访问的属性。您可以改用括号表示法[]解决它。尝试以下

let autocomplete = new window['google']['maps']['places']['Autocomplete'](this.searchElementRef.nativeElement, {
  types: ["address"]
});

此处提供有关属性访问器的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors