Question

我正在使用Google Maps，并且只想显示真实的地图。

HTML：

 <div *ngIf="anyboolToShowMapOrNot" #map id="map"></div>

我的打字稿代码：

  @ViewChild("map",{static: true}) mapElement:ElementRef;
  map: any;
  constructor(private shareService: ShareService) { }

  ngOnInit() {
  }
  ionViewWillEnter(){
    this.initMap();

  }
  initMap(){
    this.map = new google.maps.Map(this.mapElement.nativeElement,this.shareService.getMapOptions(google))
    for(let i = 0; i < 10 ; i++){
     this.addMarker(this.map,i,i,"jow sicha");
    }
  }

没有ngIf地图可以正常工作。但是随着ngIf我收到以下错误：

无法读取未定义的属性'nativeElement'

Answer 1

由于您在{static: true}中使用了@ViewChild，因此该值不会动态更新，并且当*ngIf可以将元素放入和取出元素时，您需要动态更新存在。

在使用{static: false}时，必须谨慎安排时间，并确保在使用变量之前已对其进行了实际更新。

了解@ViewChild值何时已更新的一个有用技巧是使用getter / setter。

private _mapElement: ElementRef;

@ViewChild("map", {static: false}) get mapElement(): ElementRef { return this._mapElement; }
set mapElement(newValue: ElementRef) {
  if (this._mapElement !== newValue) {
    this._mapElement = newValue;
    // Check that newValue is a defined value, and possibly perform actions here.
  }
}

无法读取未定义的Google地图的属性“ nativeElement”

1 个答案: