谷歌在*ngIf上映射灰色框[重复]

Question

我有一个组件。

@Component({
    selector: "panda-map",
    template: `
        <div class="map" [style.height.px]="height">
        </div>
    `
})
export class PandaMapComponent implements OnInit {
    @Input() height: string = "400";
    @Input() scroll: boolean = false;
    map: google.maps.Map;

    constructor(
        private readonly element: ElementRef,
        private readonly logger: NGXLogger) {
    }

    ngOnInit(): void {
        const div = this.element.nativeElement.querySelector("div");
        if (this.map)
            return;

        this.map = new google.maps.Map(
            div,
            {
                zoom: 8,
                center: { lat: -26.1714402, lng: 28.0050053 },
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: this.scroll
            });
        google.maps.event.trigger(this.map, "resize");
        google.maps.event.addListener(this.map, "idle", function () {
            google.maps.event.trigger(this.map, "resize");
        });
    }
}

地图显示在父组件上，如下所示：

<div class="pull-left shadow-panel map" *ngIf="address">
   <div>
      <panda-map [height]="400">
      </panda-map>
   </div>
</div>

地址会定期更改。

第一次创建地图时，它可以完美运行。如果将地址设置为null，然后为地址分配一个新值，则地图只会显示一个灰色框。

如您所见，我尝试了各种刷新机制，但似乎都无法正确刷新地图。

Complete Plunker

第一次单击显示/隐藏时，会绘制地图。
之后它只是一个灰色的盒子。

Answer 1

角度指令 *ngIf 删除 DOM 中的标记。但是您的组件只执行一次 ngOnInit。所以你的地图没有正确重新初始化。

您可以使用 [style.display] 代替 *ngIf

  <div class="sh" [style.display]="address ? 'none' : 'block'">
    <panda-map ></panda-map>
  </div>

（我试过你的 plunker，它工作正常）