Bing Mapsのinfoboxは角型コンポーネント内では定義されていません

Question

私は、ビンマップの実装のためのangle/typescriptのコンポーネントを作成しています。私は最初にユーザーには見えないであろうマップに情報ボックスを追加するプロセスを行った。ユーザがマップ上のいずれかのプッシュピンをクリックすると、情報ボックスが表示されます。

ただし、そうではなく、プロパティが未定義として表示されます。

注： 'DataPoints'には、long long座標と任意のID番号を含むオブジェクトのリストが含まれています。

import { Component, AfterViewInit } from '@angular/core'; 

import { DataPoint } from '../common/data-point' 
import { DataPoints } from '../common/data-points' 

@Component({ 
    selector: 'app-simple-bing-map', 
    templateUrl: './simple-bing-map.component.html', 
    styleUrls: ['./simple-bing-map.component.css'], 
    providers: [] 
}) 

export class SimpleBingMapComponent implements AfterViewInit { 

    private map: any; 
    private infobox: any; 

    ngAfterViewInit() { 
    this.getMap(); 
    } 

    populateMap(){ 
    for(var i in DataPoints){ 
     var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(DataPoints[i].Lat, DataPoints[i].Long) , null); 

     pushpin.metadata = { 
     title: "Test Pushpin", 
     description: DataPoints[i].ID, 
     }; 

     //Add a click event handler to the pushpin. 
     Microsoft.Maps.Events.addHandler(pushpin, 'click', this.displayInfobox); 

     //place pushpin 
     this.map.entities.push(pushpin); 
    } 

    } 

    getMap() { 
    //check if Microsoft is available 
    if ((window as any).Microsoft && (window as any).Microsoft.Maps) { 
     //if it is available create map instance 
     this.map = new Microsoft.Maps.Map(document.getElementById('mapId'), { 
     credentials: 'Your Bing Maps Key Here', 
     }); 

     //initialize infobox 
     this.infobox = new Microsoft.Maps.Infobox(this.map.getCenter(), { 
     title: 'Pushpins', 
     description: 'ID Number' 
     } 
    ); 

     //hide infobox 
     this.infobox.setOptions({ visible: false }) 

     //Assign the infobox to a map instance. 
     this.infobox.setMap(this.map); 

     this.populateMap(); 
    } 

    //wait and try again 
    else { 
     setTimeout(() => { this.getMap() }, 1000); 
    } 
    } 

    displayInfobox(e) { 
    //hide any previous infobox 
    this.infobox.setOptions({ visible: false }); 

    //Make sure the infobox has metadata to display. 
    if (e.target.metadata) { 
     //Set the infobox options with the metadata of the pushpin. 
     this.infobox.setOptions({ 
      location: e.target.getLocation(), 
      title: e.target.metadata.title, 
      description: e.target.metadata.description, 
      visible: true 
     }); 
    } 
    } 
} 

前述のとおり、マップは完全にロードされ、必要に応じて動作します。私が 'displayInfobox'メソッドに入った直後に、物事が変わってしまうのです。

Microsoft.Maps.Events.addHandler(pushpin, 'click', this.displayInfobox.bind(this)); 

または矢印機能：：私のようなbind方法のいずれか使用して、あなたのアドバイスでしょうdisplayInfoboxメソッドの内部でこれを保持する

Answer 1

他のソリューションについて

Microsoft.Maps.Events.addHandler(pushpin, 'click', (e) => this.displayInfobox(e)); 

は

• https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript
を見ます