离子角度:错误错误:未捕获(承诺):类型错误:无法读取未定义的属性“嗯”

时间:2021-06-02 07:06:15

标签: angular autocomplete ionic5

我使用了 Google 自动完成代码。当我尝试在字段上书写时,下拉菜单未打开并显示此错误消息。

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'um' of undefined TypeError: `Cannot read property 'um' of undefined at js?libraries=places&key=AIzaSyB61uPhq3EO7s2V5dBWLpeAtPU0r4z1H60:19 at ZoneDelegate.invoke (zone-evergreen.js:364) at Object.onInvoke (core.js:28510) at ZoneDelegate.invoke (zone-evergreen.js:363) at Zone.run (zone-evergreen.js:123) at zone-evergreen.js:857 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28497) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at resolvePromise (zone-evergreen.js:798) at zone-evergreen.js:864 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28497) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484) at invokeTask (zone-evergreen.js:1621) at HTMLScriptElement.globalZoneAwareCallback (zone-evergreen.js:1647)`

但是当我刷新页面时它会打开。问题是我希望它在第一次尝试时打开,所以我不必每次都刷新浏览器。我的代码如下,请看。

//html:

  <ion-item lines="none" class="border">
    <ion-label position="fixed">Area</ion-label>
    <ion-input class="text-position" [(ngModel)]="autocomplete.input" name="area-search" (ionChange)="updateSearchResults()"></ion-input>
  </ion-item>
  <ion-list [hidden]="autocompleteItems.length == 0">
    <ion-item *ngFor="let item of autocompleteItems" tappable (click)="selectSearchResult(item)">
      {{ item.description }}
    </ion-item>
  </ion-list>

//.ts:

import { NgZone } from '@angular/core';

//json for states and cities
import {StatesCities} from '../../../assets/states-cities/data';
.
.
.
GoogleAutocomplete: any;
autocomplete: any;
autocompleteItems: any;
isTapped: boolean = false;
geocoder: any;
fullAddress: any;
position:any = {
  lat:'',
  lng:''
}

constructor(public zone: NgZone) {
      this.GoogleAutocomplete = new google.maps.places.AutocompleteService();
      this.autocomplete = {
        input: '',
        componentRestrictions: {country: "us"}
      };
      this.autocompleteItems = [];
      this.geocoder = new google.maps.Geocoder;
     }
.
.
.
  updateSearchResults(){

    //console.log(this.autocomplete.input,"item");
    if (this.autocomplete.input!='' && this.isTapped) {
      this.autocompleteItems = [];
      this.isTapped = false;
      //console.log("in if");
      return;
    }

    this.fullAddress = this.autocomplete.input + this.selectedState + this.selectedCity;
    //console.log(this.fullAddress,"area input ");

    //google autocomplete with country restriction
    if (this.autocomplete.input.length) {
      this.GoogleAutocomplete.getPlacePredictions({ input: this.fullAddress, componentRestrictions: this.autocomplete.componentRestrictions},
        (predictions, status) => {
          this.autocompleteItems = [];
          if(predictions){
            this.zone.run(() => {
              predictions.forEach((prediction) => {
                this.autocompleteItems.push(prediction);
              });
            });
          }
      });
    }
    this.autocompleteItems = [];
  }
  selectSearchResult(item){

    //console.log(item.description,"address");
    this.autocomplete.input = item.description;

    this.property.address=this.autocomplete.input;
    //console.log(this.property.address,"this.property.address");

    this.autocompleteItems = [];
    this.isTapped=true;

    //latitude longitude finder
    this.geocoder.geocode({'placeId': item.place_id}, (results, status) => {
      if(status === 'OK' && results[0]){
        this.position = {
            lat: results[0].geometry.location.lat().toString(),
            lng: results[0].geometry.location.lng().toString()
         };
         this.property.latlng = this.position.lat+","+this.position.lng;

      }
    })
  }

1 个答案:

答案 0 :(得分:0)

大家好,我已经找到了解决此错误的方法。这个错误通常发生在不同的属性上,说 UNDEFINED,比如上次我的错误更改为“Wu”为未定义。

这是一个非常小的错误导致了这个错误,那就是“地方”。如果您忘记在 API 脚本标签中写入“libraries=places”,就会发生这种情况。

所以无论您在哪里使用您的脚本,都不要忘记写上“libraries=places”。

谢谢