原生元素的大小为零

Question

在代码中，我使用 ViewChild 引用了我的 DOM 元素。
但是如果我尝试在 ngAfterViewInit 钩子中检查这个元素，我会发现我的元素的 offsetHeight 和 offsetWidth 为零。（有时一切都好）
我认为这是因为我创建的元素尚未在 Dom 中渲染？
有什么办法解决这个问题吗？我正在使用离子4。

HTML:

<div id="map" #map [style.height.px] = "'300'" [style.width.px]="'100'"></div>

TS:

...
map: any;
@ViewChild('map') mapElement: ElementRef;

ngAfterViewInit() {
    this.loadMap();
}

loadMap() {  
    //usually return 0  
    console.log('height:' + this.mapElement.nativeElement.offsetHeight); 
    console.log('width:' + this.mapElement.nativeElement.offsetWidth);

    this.map = DG.map(this.mapElement.nativeElement);
}
...

我期望高度为 300，宽度为 100。

Answer 1

代码很糟糕，但它可以工作

ngAfterViewInit() {
   setTimeout(() => {
      this.loadMap();
    }, 0);    
}