Я получаю эту ошибку при использовании автозаполнения для угловых карт (AGM),
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
TypeError: Cannot read property 'nativeElement' of undefined
при использовании ElementRef
для углового public searchElement: ElementRef;
,
строка am получает ошибку:
public latitude: number;
public longitude: number;
public searchControl: FormControl;
public zoom: number;
@ViewChild("search")
public searchElementRef: ElementRef;
constructor(
private mapsAPILoader: MapsAPILoader,
private ngZone: NgZone
) {}
ngOnInit() {
//set google maps defaults
this.zoom = 4;
this.latitude = 39.8282;
this.longitude = -98.5795;
//create search FormControl
this.searchControl = new FormControl();
//set current position
this.setCurrentPosition();
//load Places Autocomplete
this.mapsAPILoader.load().then(() => {
let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
types: ["address"]
});
autocomplete.addListener("place_changed", () => {
this.ngZone.run(() => {
//get the place result
let place: google.maps.places.PlaceResult = autocomplete.getPlace();
//verify result
if (place.geometry === undefined || place.geometry === null) {
return;
}
//set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 12;
});
});
});
}
На мой взгляд, компонент
<div class="form-group">
<input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
</div>
<agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom">
<agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>
Я использую это в двух компонентах, в одном он работает штрафы, а другой - это ошибка. Попробовали использовать разные имена для элемента ref, но сгладили ту же ошибку.
Вы должны объявить переменную типа
@ViewChild("search") public searchElementRef: ElementRef;
вместо
public searchElement: ElementRef
что означает, searchElement
переменная searchElement
ссылается на ссылку шаблона search
указанную внутри вашего шаблона, как (#search)
wrt input
element.
searchElement
в свой файл шаблона? Или ссылку на шаблонsearch
, если у вас есть переменная, объявленная как@ViewChild("search") public searchElementRef: ElementRef;
<input class="uk-input uk-form-width-medium" placeholder="search area" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" #search>