Bootstrap Modal 在 Angular 中打开不一致

Question

我试图在点击创建的谷歌地图标记时打开一个模式。模态非常不一致——有时立即打开，有时需要 5-10 秒，有时根本不打开。不过，当我调整窗口大小时，它会立即打开。在下面的视频中，模态框首先需要 14 秒才能打开，然后它只会在我调整大小时打开。知道为什么会出现这种不一致的行为吗？

这里是行为视频的链接：https://share.vidyard.com/watch/niz9TtNiWTwKx4sc2hqev7?

打字稿：

import { Component, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { PindataService } from '../pindata.service';
import { ViewModalComponent } from '../view-modal/view-modal.component';

@Component({
  selector: 'app-pin-modal',
  templateUrl: './pin-modal.component.html',
  styleUrls: ['./pin-modal.component.css']
})
export class PinModalComponent {

  @Input() data: any;
  @Input() pin: any;
  @Input() id: any;
  @Input() pins: any;
  @Input() newPin: any;

  openViewModal(){
    const modalRef = this.modalService.open(ViewModalComponent, {size: 'xl', modalDialogClass: 'modal-dialog-centered'});
    modalRef.componentInstance.pin = this.pin;
    modalRef.componentInstance.pins = this.pins;
    console.log("openViewModal() function executes!");
  }

  renderPins(){
    this.pinDataService.getAllPins().subscribe(data=>{
      this.pins=data;
      const map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
        center: { lat: 35, lng: 5 },
        zoom: 3,
        minZoom: 2,
        streetViewControl: false,
        fullscreenControl: false,
        gestureHandling: "greedy",
        restriction: {
          latLngBounds: {
              north: 85,
              south: -85,
              west: -180,
              east: 180
          }
        }
      });

      for (let i = 0; i<this.pins.length; i++) {
        if (this.pins[i].userId === Number(sessionStorage.getItem("currentUserId"))) {
        let marker = new google.maps.Marker({
          position: { lat: Number(this.pins[i].lat), lng: Number(this.pins[i].lng) },
          map,
          icon: "https://img.icons8.com/tiny-color/32/null/map-pin.png",
        })
          marker.addListener("click", () => {
          this.pin.id=this.pins[i].id;
          this.pin.name=this.pins[i].name;
          this.pin.departDate=this.pins[i].departDate;
          this.pin.log=this.pins[i].log;
          this.pin.title=this.pins[i].title;
          this.pin.lat=this.pins[i].lat;
          this.pin.lng=this.pins[i].lng;
          this.pin.imageUrl1=this.pins[i].imageUrl1;
          this.pin.imageUrl2=this.pins[i].imageUrl2;
          this.pin.imageUrl3=this.pins[i].imageUrl3;
          this.openViewModal();
          })  
        }
      }
    })
  }

  constructor(private pinDataService: PindataService, public activeModalService: NgbActiveModal, public modalService: NgbModal){}


  onSubmit(){
    this.pinDataService.savePin(this.newPin).subscribe({
      next: (data) => {
        this.activeModalService.dismiss();
        this.renderPins();
      },
      error: (error) => {
        alert("There was a problem saving this pin.");
      }
    }) 
  }
}

HTML：

<form (ngSubmit) = "onSubmit()">
    <div class="modal-content">
        <div class="modal-header text-center d-block">
            <h4 class="modal-title d-inline-block">Create New Pin: "My Trip to {{newPin.name}}"</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <h5>Trip Description: </h5>
                <input type="text" class="form-control" placeholder="What was the occassion for this trip?" id="title" name="title" [(ngModel)]="newPin.title">
                <h5>Date: </h5>
                <input type="date" class="form-control w-25" id="depart" name="depart" [(ngModel)]="newPin.departDate">
                <h5>Trip Log: </h5>
                <textarea class="form-control" placeholder='What did you do there?' rows='5' cols='15' id="log" name="log" [(ngModel)]="newPin.log"></textarea>
                <h5>Photos: </h5>
                <input type="text" class="form-control" placeholder="Paste image URL here" id="imageUrl1" name="imageUrl1" [(ngModel)]="newPin.imageUrl1">
                <input type="text" class="form-control" placeholder="Paste image URL here" id="imageUrl2" name="imageUrl2" [(ngModel)]="newPin.imageUrl2">
                <input type="text" class="form-control" placeholder="Paste image URL here" id="imageUrl3" name="imageUrl3" [(ngModel)]="newPin.imageUrl3">
                <input [hidden]="true" type="number" class="form-control" placeholder="TEST" id="userId" name="userId" [(ngModel)]="newPin.userId">
            </div>
        </div>
        <div class="modal-footer">
            <button type="submit" class="btn btn-success">Create Pin</button>
            <button type="button" class="btn btn-warning" (click)="activeModalService.dismiss('Cross click')">Close</button>
        </div>
    </div>
    </form>

CSS：

.modal-header {
    background-color: #337AB7;
    padding:16px 16px;
    color:#FFF;
    border-bottom:2px dashed #337AB7;
}

.form-control {
    margin-left: 20px;
    width: 95%;
    margin-bottom: 20px;
}

textarea {
    margin-left: 20px;
    width: 95%;
    margin-bottom: 20px;
}

h5 {
    padding-left: 20px;
    margin-bottom: 15px;
}

我尝试过改变 HTML 元素的顺序，分别调用 renderPins() 函数，调整 z-index，并检查模式点击事件处理程序。所有人都产生了相同的结果。