错误 错误： 未捕获 (在承诺中)： 类型错误： 无法读取未定义的属性'nativeElement'

Question

我收到以下错误：错误错误：未捕获(在承诺中(：类型错误：无法读取未定义的属性"本机元素"。

当我尝试在谷歌地图中添加带有 ngIf 的div 时，就会发生这种情况：

.HTML：

<div class="form-group">
<label>Location by map?</label>
<mat-select formControlName="ubication" [(ngModel)]="mapVisibility" class="form-control" placeholder="Select option">
<mat-option disabled>Select option</mat-option>
<mat-option value="visible">Yes</mat-option>
<mat-option value="hidden">No</mat-option>
</mat-select>
</div>
<div *ngIf="mapVisibility === 'visible'">
<div class="example-form">
<mat-form-field class="example-full-width">
<input matInput type="text" (keydown.enter)="$event.preventDefault()" autocorrect="off" autocapitalize="off" spellcheck="off" #agmSearch placeholder="Enter address">
</mat-form-field>
</div>
<agm-map id="googleMap" [latitude]="lat" [longitude]="lng" [zoom]="zoom">
<agm-marker [latitude]="lat" [longitude]="lng" [markerDraggable]="true" (dragEnd)="markerDragEnd($event)"></agm-marker>
</agm-map>
</div>

TS：

mapVisibility: string;
ngOnInit() {
this.getPlacesAutocomplete();
}
getPlacesAutocomplete() {
// load Places Autocomplete
this.mapsAPILoader.load().then(() => {
this.setCurrentLocation();
this.geoCoder = new google.maps.Geocoder;
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.lat = place.geometry.location.lat();
this.lng = place.geometry.location.lng();
this.zoom = 12;
});
});
});
}
private setCurrentLocation() {
if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition((position) => {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
this.zoom = 15;
this.getAddress(this.lat, this.lng);
});
}
}
getAddress(latitude, longitude) {
this.geoCoder = new google.maps.Geocoder();
this.geoCoder.geocode({ 'location': { lat: latitude, lng: longitude } }, (results, status) => {
console.log(results);
if (status === 'OK') {
if (results[0]) {
this.zoom = 12;
this.address = results[0].address_components[1].long_name + ' ' + results[0].address_components[0].long_name;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}

我从这里提取了代码： 角度 8/7 |在 Angular 2 中添加带有位置搜索的谷歌地图，并使用 Angular 谷歌地图模块(@agm/核心(轻松添加应用程序

错误： 图像错误

虽然我收到此错误，但地图工作正常，但我无法通过在输入中输入地址来实现对地点的搜索，如果我删除包含 ngIf 的div，这确实有效。 这是怎么回事？ 有什么想法吗？

Answer 1

使用 ngAfterViewInit 而不是 ngOnInit

ngAfterViewInit () {
this.getPlacesAutocomplete();
}

视图查询是在调用 ngAfterViewInit 回调之前设置的。

您需要更改*ngIf以hidden这样，则 elemnt 将可用，否则searchElementRef将为 null，直到条件为 true

<div [hidden]="mapVisibility === 'visible'">
...
</div>

Answer 2

在组件初始化(DOM 加载(后调用您的函数ngAfterViewInit

ngAfterViewInit() {
this.getPlacesAutocomplete();
}

或者在 setTimeout 上围绕你的代码(坏主意(：

ngOnInit() {
setTimeout( _ =>   this.getPlacesAutocomplete() , 1000)
}

如果您正在使用ngAfterViewInit请不要忘记class MyComponent implements AfterViewInit