typescript - Angular2- değişken ekleme tanımsız

Kendi infoWindow'ımı oluşturmaya çalışıyorum ve bunu bir Google Maps sınıfının ebeveynine ekliyorum. Fonksiyon şöyle görünüyor ve bir marker'a tıklanarak tetikleniyor:

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 tıklanan işaretçinin ID'sini gösteriyor, ancak div class='test' içinde tanımsız olarak görünüyor.

Bu neden?

Ya da HTML şablonunda oluşturduğunuz bir div'i eklemek de mümkün mü? Bu şöyle görünüyor:

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

Cevap #1

function() 'this'i yetim bırakır:

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

yerine this kapsamını korumak için kullan

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

Ayrıca bkz. https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Cevap #2

İki şey.

İlk olarak: Gunter'in belirttiği gibi, kapsam nedeniyle undefined alıyorsunuz. Ok fonksiyonları kullanmak probleminizi çözebilir.

İkincisi: Bence senin problemin için daha iyi bir çözüm innerHtml kullanmak olacaktır.

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

Ve

myHtml: string;


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

Güncelleme! OP zaten angular-maps bileşenini kullandığı için, en iyi çözüm zaten SebmGoogleMapInfoWindow ile mevcut.

Bileşen işaretlemesinin içine kendi HTML'inizi ekleyebilirsiniz:

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

Ve bileşen bir clickedMarker olayı sağladığı için. Bunu kendi özel HTML'inizi eklemek için kullanabilirsiniz:

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

Tam örnek burada http://plnkr.co/edit/mG5cXP?p=preview