Question

我正在尝试创建一个自己的infoWindow，我将其附加到google maps类的父级，该函数看起来像是通过单击标记触发的：

updateDiv(location: Location) {
this.selectedLocation = location;
this.isClicked = true;
this.ID = this.selectedLocation.id;


console.log(this.ID)

$(function() {
   $('.gm-style-iw').parent().append('<div class="test"><span class="ID">'+ this.ID +'</span></div>');
 });
}

console.log显示所点击标记的ID，但在div class='test'中显示为未定义。

为什么？

或者是否也可以追加你在html模板中创建的div？看起来像这样：

<div *ngIf="isClicked" class="infoWindow">
   <p>{{ selectedLocation.id }} {{ selectedLocation.content }}</p>
</div>

Answer 1

function()孤儿this：

$(function() {
   $('.gm-style-iw').parent().append('<div class="test"><span class="ID">'+ this.ID +'</span></div>');
 });
}

保持this的使用范围

$(() => {
   $('.gm-style-iw').parent().append('<div class="test"><span class="ID">'+ this.ID +'</span></div>');
 });
}

另见https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

两件事。

第一：正如Gunter所提到的，由于范围的原因，你未定义。使用胖箭头功能可以解决您的问题。

第二：我认为更好的解决方案是使用innerHtml。

＆＃13;

<div [innerHtml]="myHtml"></div>

＆＃13;

和

＆＃13;

myHtml: string;


constructor() {
  this.myHtml = '<input type="text">'
}

＆＃13;

更新！由于OP已经在使用角度图组件，因此SebmGoogleMapInfoWindow

已经存在最佳解决方案

在组件标记内，您可以包含自己的html：

＆＃13;

<sebm-google-map-info-window>
  <div [innerHtml]="infoW" ></div>
</sebm-google-map-info-window>

＆＃13;

并且该组件提供了clickedMarker事件。您可以使用它来插入自定义HTML：

＆＃13;

clickedMarker(label: string, index: number) {
    this.infoW = '<input type="text" value="' + label  + '"> <hr> <button class="btn btn-success">Index = ' + index +  '</button>'      
  }

＆＃13;

完整示例http://plnkr.co/edit/mG5cXP?p=preview

Angular2- append变量未定义

2 个答案: