javascript - Angular 2 @ViewChild ("graphCanvas")graphCanvas : ElementRef is undefined

Question

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

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

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

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

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

编辑:我正在使用 map 在该 map 上绘制圆圈(数据即项目)。仅当我启动应用程序并且仅当我第一次使用搜索时才会出现此问题。两种方法，搜索并单击圆圈，都会转到相同的方法。

点击“圆圈 - 工作”:

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 make console.log show the current state of an object?
• console.log() async or sync?