角2 @ViewChild（「graphCanvas」）graphCanvas：ElementRef未定義

Question

我面對我的DOM元素的一個頗爲奇怪的行爲，通過建立具有角2

應用我使用的是canvas元素繪製圖裏面，我選擇使用@ViewChild的元素。不知怎麼的角度說，由於未定義，它不能進一步執行任何方法。

因此，我在發生錯誤之前完全註銷。

console.log(this); console.log(this.graphCanvas); 結果：

希望你明白我的意思。這包含graphCanvas元素，但如果我嘗試訪問它，我得到了一個未定義的。

編輯： 我正在使用地圖在此地圖上繪製圓圈（數據即項目）。只有當我啓動應用程序並且僅在第一次使用搜索時纔會出現此問題。兩種方法，搜索和點擊圓圈，頭相同的方法。

點擊圈 - 工作：

cityCircle.addListener('click', function (e) { 
localThis.currentCity = cityCircle.data_obj; 
    localThis.cityClicked = true 
    localThis.zone.run(() => {}); 
    cityCircle.setOptions({ 
     fillColor: '#d7490b', 
     strokeColor: '#026384' 
    }); 
    if (localThis.currentCircleInMap) { 
     localThis.currentCircleInMap.setOptions({ 
      fillColor: '#026384', 
      strokeColor: '#026384' 
     }); 
    } 
    localThis.currentCircleInMap = cityCircle; 

    localThis.map.setCenter({ 
     lat: localThis.currentCity.geo_data.lat, 
     lng: localThis.currentCity.geo_data.lng 
    }); 
    localThis.map.setZoom(10); 
    localThis.setGraphView(localThis.currentCity.data_by_year); 
}); 

搜索 - 不工作：

autoCompleteClicked(event): void {  
    try { 
     var cityClickedKey = event.getAttribute('data-city'); 
    } catch (error) { 
     var cityClickedKey = event.value; 
    } 

    this.globalData.migration_data.forEach(element => {  
     if (element.city.includes(cityClickedKey)) {   
     this.currentCity = element; 
     this.map.setCenter({ 
      lat: this.currentCity.geo_data.lat, 
      lng: this.currentCity.geo_data.lng 
     }); 
     this.map.setZoom(10); 
     this.highlightClickedCircle() 
     this.cityClicked = true; 
     } 
    }); 
    (<HTMLInputElement>document.getElementById("search")).value = this.currentCity.city; 
    this.autoCompleteAvailable = false; 
    this.setGraphView(this.currentCity.data_by_year);} 

在setGraphView方法的子元素未設置。

Answer 1

console.log只能顯示對象的當前狀態，而不是調用時的快照對象。

它打印對象的引用，並且在web devtool中看到它時，它已更改。

所以我懷疑你試圖讓Viewchild在沒有填充的時候。

參見：

• How can I change the default behavior of console.log in Safari?
• console.log() async or sync?