Angular2- anhängen Variable nicht definiert ist

Question

Ich versuche, eine eigene Infowindow zu erstellen, die ich an die Eltern eines Google-Maps-Klasse Appen die Funktion sieht wie folgt aus, die durch Klicken auf eine Markierung ausgelöst wird:

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>'); 
}); 
} 

Die console.log zeigt die ID des angeklickten Markers an, aber in div class='test' erscheint es als undefiniert.

Warum ist das?

Oder ist es auch möglich, ein div anzuhängen, das Sie in der HTML-Vorlage erstellt haben? Die wie folgt aussieht:

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

Answer 1

function() Waisen this:

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

den Umfang der this Gebrauch zu halten, statt

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

Siehe auch https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

Zwei Dinge.

Erstens: Wie von Gunter erwähnt, werden Sie durch den Umfang undefiniert. Fettpfeilfunktionen könnten Ihr Problem lösen.

Zweitens: Ich denke, eine bessere Lösung für Ihr Problem wäre die Verwendung von innerHtml.

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

Und

myHtml: string; 
 

 

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

Update! Wie OP ist bereits die Winkel-Karten-Komponente verwendet wird, ist die beste Lösung bereits dort mit dem SebmGoogleMapInfoWindow

Innerhalb der Komponente Markup Sie Ihre eigenen HTML können sein:

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

Und da die Komponente ein clickedMarker-Ereignis bereitstellt. Sie können es verwenden, um Ihre benutzerdefinierte HTML einfügen:

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

Voll Beispiel Hier http://plnkr.co/edit/mG5cXP?p=preview