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