TypeScript'this。'未設置對象

Question

我正在使用Bing地圖v8進行地理編碼。起初這段代碼不在一個類中。我已經結束了在一個類中添加代碼，因爲這個錯誤的：

​​

因爲我使用的一類，現在我有問題「這一點。」。 閱讀'this' in TypeScript後，我改變了使用實例函數（例如箭頭的功能）我的功能：

/// <reference path="./../scripts/MicrosoftMaps/Microsoft.Maps.d.ts" /> 
/// <reference path="./../scripts/MicrosoftMaps/Modules/Search.d.ts" /> 
/// <reference path="./../scripts/typings/jquery/jquery.d.ts" /> 

class BMGeocode { 

    map: Microsoft.Maps.Map; 
    searchManager: Microsoft.Maps.Search.SearchManager; 

    public loadMap =() => { 
     this.map = new Microsoft.Maps.Map('#map', { 
      credentials: 'xxx', 
      center: new Microsoft.Maps.Location(51.087299, 2.976770), 
      zoom: 10 
     }); 
    } 

    public search =() => { 
     if (!this.searchManager) { 
      Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() { 
       this.searchManager = new Microsoft.Maps.Search.SearchManager(this.map) ; // PROBLEM: searchManager is never set? 
      }); 
     } 

     // remove any previous results from the map. 
     this.map.entities.clear(); 

     // get the users query and geocode it. 
     let query: string = (<HTMLInputElement>document.getElementById("txtInput")).value; 
     this.geocodeQuery(query); 
    } 

    private geocodeQuery = (query: string) => { 
     var userData = { name: 'Maps Test User', id: 'XYZ' }; 
     let searchRequest: Microsoft.Maps.Search.IGeocodeRequestOptions = { 
      where: query, 
      userData: userData, 
      count: 5, 
      bounds: this.map.getBounds(), 
      callback: function (r: any) { 
       // PROBLEM: r undefined. 
       if (r && r.results && r.results.length > 0) { 
        var topResult = r.results[0]; 
        if (topResult) { 
         this.addPin(topResult.location); 
         $('#txtInput').focus().select(); 
        } 
       } 
      }, 
      errorCallback: function (e: any) { 
       // If there is an error, alert the user about it. 
       alert("No results found."); 
      } 
     }; 

     // make the geocode request: 
     this.searchManager.geocode(searchRequest); 
    } 

    // .. other stuff in class 
} 


let geo: BMGeocode = new BMGeocode(); 

function onGeocodeClick() { 
    geo.search(); 
} 

$(function() { 
    geo.loadMap(); 
    $('#geocode').click(onGeocodeClick); 
}) 

我想我已經發現這個問題，爲什麼這是行不通的，因爲SearchManager的總是空或未定義。但是我不知道如何解決它。

這條線從「搜索」功能的作品，但似乎並沒有設置SearchManager的變量：

this.searchManager = new Microsoft.Maps.Search.SearchManager(this.map); 

的SearchManager的沒有設置，所以我不能提出一個要求：

// make the geocode request: 
    this.searchManager.geocode(searchRequest); 

這怎麼能在TypeScript中解決？

更新：這似乎並沒有工作之一：

public search =() => { 
      if (!this.searchManager) { 
       var self = this; 
       Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() { 
        self.searchManager = new Microsoft.Maps.Search.SearchManager(self.map); // PROBLEM!! 
    self.search(); 
       }); 

      } else { 

      // remove any previous results from the map. 
      this.map.entities.clear(); 

      // get the users query and geocode it. 
      let query: string = (<HTMLInputElement>document.getElementById("txtInput")).value; 
      this.geocodeQuery(query); 
     } 

Answer 1

問題是this變量不指BMGeocode你所期望的，但在你試圖使用關閉它。試試這個：

var self = this 
Microsoft.Maps.loadModule('Microsoft.Maps.Search', function() { 
    self.searchManager = new Microsoft.Maps.Search.SearchManager(self.map) ; // PROBLEM: searchManager is never set? 
});