这个问题是由于PlaceResult对象的结构不符合自动完成指令所期望的结构而引起的。
要解决这个问题,我们可以创建一个新的对象,该对象包含我们希望传递给自动完成指令的任何属性、值对。我们可以使用以下代码示例创建新的对象:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { MapsAPILoader } from '@agm/core';
import { } from 'googlemaps';
@Component({
selector: 'app-root',
template: `
`,
})
export class AppComponent {
@ViewChild('search') public searchElementRef: ElementRef;
constructor(private readonly mapsAPILoader: MapsAPILoader) {}
ngAfterViewInit() {
this.mapsAPILoader.load().then(() => {
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement);
autocomplete.addListener('place_changed', () => {
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
const patchedObject = {
description: place.formatted_address,
location: {
latitude: place.geometry.location.lat(),
longitude: place.geometry.location.lng(),
},
};
});
});
}
}
在上面的代码中,我们创建了一个新的对象patchedObject
,该对象包含我们希望传递给自动完成指令的所有属性、值对。这个对象与PlaceResult对象不同,但是包含了我们需要的任何有用的信息。现在我们可以使用这个对象来更新我们的表单:
现在,我们可以通过在自动完成指令上使用patchedObject
对象来解决这个问题,而无需使用原始的PlaceResult对象。