錯誤錯誤：未捕獲（承諾）：TypeError：無法讀取未定義的屬性“ nativeElement”

Question

我收到以下錯誤：錯誤錯誤：未捕獲（承諾）：TypeError：無法讀取未定義的屬性'nativeElement'。

當我嘗試在google map中添加帶有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);
  }
});
}

我從這里提取了代碼： Angular 8/7 | 使用Angular Google Maps模塊（@ agm / core）輕松在Angular 2加上應用程序中添加帶有位置搜索的Google Maps

錯誤： 圖片錯誤

盡管出現此錯誤，但地圖工作正常，但是我無法通過在輸入中輸入地址來實現對地點的搜索，如果我刪除了包含ngIf的div，它就可以工作。 這是怎么回事 有任何想法嗎？

Answer 1

使用ngAfterViewInit而不是ngOnInit

ngAfterViewInit () {
    this.getPlacesAutocomplete();
}

視圖查詢是在調用ngAfterViewInit回調之前設置的。

您需要將*ngIf更改為以這種方式hidden否則searchElementRef將可用，否則searchElementRef將為null直到條件為真

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

Answer 2

在ngAfterViewInit上初始化組件（加載DOM）后調用函數

ngAfterViewInit() {
    this.getPlacesAutocomplete();
}

或者將代碼放在setTimeout上（錯誤的主意）：

ngOnInit() {

setTimeout( _ =>   this.getPlacesAutocomplete() , 1000)

}

如果您使用的是ngAfterViewInit請不要忘記class MyComponent implements AfterViewInit