Question

通过使用angular 2构建应用程序，我面临着一个非常奇怪的DOM元素行为。

我使用canvas元素在其中绘制图形，我使用@ViewChild选择元素。不知何故，angular表示由于未定义，它无法进一步执行任何方法。

所以我在错误发生之前就已经注销了。

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

希望你明白我的意思。这包含graphCanvas元素，但如果我尝试访问它，我得到一个未定义。

修改我正在使用地图在此地图上绘制圆圈（数据viz项目）。问题只发生在我启动应用程序时，并且只有在我第一次使用搜索时才会出现。两种方法，搜索并点击圆圈，前往相同的方法。

点击圈子 - 工作：

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。

另见：

Angular 2 @ViewChild（＆＃34; graphCanvas＆＃34;）graphCanvas：ElementRef未定义

1 个答案: