尝试在同一页面上支付几张传单地图时出现“找不到地图容器”错误

Question

我正在开发一个wep应用程序，在其中我在同一页面上多次显示相同的组件，但值有所变化。这些组件中的每一个都包含一个Leaflet映射，因此我需要一种向TypeScript代码指定所有这些映射都不相同的方法。

通过天真尝试，我遇到了“地图容器已经初始化”错误，因此我在Component中添加了一个Input字段，用作每个地图的ID。看起来是这样的：

HTML模板

<nb-card>
  <nb-card-body>
    <div class="map" [id]="jobId"></div>
  </nb-card-body>
</nb-card>

TypeScript代码

  @Input() jobId: string;

  lat: number;
  lng: number;

  ngOnInit () {
    let myMap = L.map(this.jobId).setView([this.lat, this.lng], 15);
    ...
  }

运行此代码时，出现“找不到地图容器”错误。你们知道我为什么会收到此错误以及如何解决该错误吗？ 谢谢。