Css 在初始载荷下隐藏传单角度贴图

我有一个使用了以下css的地图。当页面加载时，我希望地图被隐藏，只有在按下按钮后才能加载

在控制台上，我使用了以下命令，它正在工作，它使地图隐藏起来

    document.getElementsByClassName('DemoMap')[0]).style.height="0px";

但是从类型脚本代码

    (<HTMLElement>document.getElementsByClassName('DemoMap')[0]).style.height="0px";

创建一个标志

isMapVisible=false

在标记中，使用
[style.display]
配置标记的状态：

<div
  style="height: 90vh;"
  [style.display]="isMapVisible ? 'block' : 'none'"
  leaflet
  [leafletOptions]="options"
></div>

<button (click)="showMap()">Show map</button>


.DemoMap {
  z-index: 1;
  position: absolute;
  width: calc(100% - 600px);
  height: calc(100% - 400px);
  top: 60px;
}

<div
  style="height: 90vh;"
  [style.display]="isMapVisible ? 'block' : 'none'"
  leaflet
  [leafletOptions]="options"
></div>

<button (click)="showMap()">Show map</button>

showMap() {
    this.isMapVisible = true;
}