Angular5中如何在模态框中显示markerClick传递的item.Lat参数

嘿，我明白你现在的困扰——点击地图标记后想在模态框里展示对应的纬度，但一直没成功对吧？问题出在你传递latTmp的方式上，咱们来一步步修复它：

问题根源 #

你现在把latTmp作为modalService.open()的第二个参数传入，但这个参数实际上是模态框的配置选项（比如设置尺寸、背景是否可点击关闭等），不是用来传递业务数据的，所以模态框根本接收不到这个纬度值。

解决方案 #

我们可以用组件类的变量来暂存选中的纬度，然后在模态框模板里直接绑定这个变量：

1. 修改你的component.ts代码

首先在组件类里添加一个变量来存储选中的纬度，然后修改open方法，把点击的纬度赋值给这个变量：

// 在组件类顶部定义变量
selectedLat: number;

open(content, latTmp) {
  // 把点击的纬度存到组件变量中
  this.selectedLat = latTmp;
  // 这里只需要传入content，配置项可选（如果需要的话再传）
  this.modalService.open(content).result.then((result) => {
    this.closeResult = `Closed with: ${result}`;
  }, (reason) => {
    this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
  });
  console.log(latTmp);
}

2. 修改component.html的模态框模板

在模态框的modal-body里，直接绑定我们刚才定义的selectedLat变量：

<div class="modal-body">
  <p>Test Hardware 1, sätt behörighet&hellip;</p>
  <p>Test Hardware 2&hellip;</p>
  <!-- 这里展示选中的纬度 -->
  <p>Selected Station Latitude: {{ selectedLat }}</p>
</div>

额外说明 #

如果你想用模板变量的方式传递数据（比如利用ng-template的let-*语法），也是可以的，但对于这种简单场景，直接使用组件类变量是最直观且容易维护的方式。

现在你再点击地图标记，模态框里就能正确显示对应的纬度啦！

内容的提问来源于stack exchange，提问作者JoBo