角度材料对话框 - AGM地图

Question

我正在尝试创建一个材质对话框，以使用AGM（角度谷歌地图）捕获用户位置。我在主页面中有一个工作示例，但是当对话框打开时，它只显示地图应该是的空白区域。当我改变CSS高度并且可以看到白色区域增长/收缩。

有谁知道为什么？或者我可以尝试一下吗？

这是我的对话HTML ...

<h1 mat-dialog-title>Where do you work?</h1>
<div mat-dialog-content>
  <mat-form-field>
    <input matInput placeholder="enter work location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control" #search [formControl]="searchControl">
    <agm-map id="capture-work-map" [latitude]="coordinates.lat" [longitude]="coordinates.lng" [zoom]="zoom">
      <agm-marker [markerDraggable]="true" [latitude]="coordinates.lat" [longitude]="coordinates.lng"></agm-marker>
    </agm-map>
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">Cancel</button>
  <button mat-button [mat-dialog-close]="coordinates" cdkFocusInitial>Update</button>
</div>

这是我的对话框CSS ...

#capture-work-map {
  height: 300px;
}

对话框TypeScript ...

import {Component, ElementRef, Inject, OnInit, ViewChild} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
import {Coordinates} from '../model';
import {FormControl} from '@angular/forms';

@Component({
  selector: 'app-work-dialog',
  templateUrl: './work-dialog.component.html',
  styleUrls: ['./work-dialog.component.css']
})
export class WorkDialogComponent implements OnInit {
  @ViewChild('search') public searchElementRef: ElementRef;
  public searchControl: FormControl;
  private coordinates: Coordinates;
  constructor(
    public dialogRef: MatDialogRef<WorkDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: Coordinates
  ) {}

  ngOnInit() {}

  onNoClick() {
    this.dialogRef.close();
  }
}

触发对话框打开的TypeScript ...

captureWorkLocation() {
    this.ngZone.run(() =>
      this.dialog.open(WorkDialogComponent, {
        width: '90vh', height: '90vh',
        data: this.user.work
      }).afterClosed().subscribe(result => {
        this.user.work = result;
      })
    );
  }

Answer 1

如果未定义lat / lng，则不会加载地图。这些值最初未设置，因此我硬编码了初始值并正确显示了地图。