我使用了 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;
}
})
}
答案 0 :(得分:0)
大家好,我已经找到了解决此错误的方法。这个错误通常发生在不同的属性上,说 UNDEFINED,比如上次我的错误更改为“Wu”为未定义。
这是一个非常小的错误导致了这个错误,那就是“地方”。如果您忘记在 API 脚本标签中写入“libraries=places”,就会发生这种情况。
所以无论您在哪里使用您的脚本,都不要忘记写上“libraries=places”。
谢谢