Angular2-追加变量未定义

Question

我想创建一个自己的信息窗口，我到澳鹏谷歌地图类的父级的功能这个样子的，其被通过点击标记触发：

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。

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

而且

myHtml: string; 
 

 

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

更新！ 作为OP已经在使用该角地图组件，最佳的解决方案已经存在与SebmGoogleMapInfoWindow

内组件的标记，你可以包括你自己的HTML：

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

而且因为组件提供clickedMarker事件。你可以用它来插入您的自定义HTML：

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

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