1

我有一个问题，我尝试将 onEachFeature 方法用于 geoJSON 层。我尝试为每个功能分配一个点击监听器。问题是，当我单击某个功能时，我总是会收到该错误：

未捕获的类型错误：无法读取未定义的属性“detectChanges”

我可以想到这是因为在构造函数运行之前分配了图层，但是在 ngOnInit 函数中这样做也不会起作用。如果有一个好的方法来做到这一点会很酷:)

  constructor(private changeDetector: ChangeDetectorRef){}

  fitBounds: LatLngBounds;
  geoLayer = geoJSON(statesData, {onEachFeature : this.onEachFeature});

  onEachFeature(feature , layer) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }

  layer: Layer[] = [];
  fitBounds: LatLngBounds;
  
  onEachFeature(feature , layer : geoJSON) {
    layer.on('click', <LeafletMouseEvent> (e) => {
        console.log("tets"+e.target.getBounds().toBBoxString());
        this.fitBounds = [
            [0.712, -74.227],
            [0.774, -74.125]
        ];
        this.changeDetector.detectChanges();
    });
  }
  
constructor(private changeDetector: ChangeDetectorRef){}

ngOnInit() {
      let geoLayer = geoJSON(statesData, {onEachFeature : this.onEachFeature});
      this.layer.push(geoLayer);
}

4

1 回答 1

7

您需要确保this在您的回调中可以访问该权限。您使用function.bind()Javascript 执行此操作。请参阅：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

constructor(private changeDetector: ChangeDetectorRef){}

fitBounds: LatLngBounds;
geoLayer = geoJSON(statesData, {
    // Need to bind the proper this context
    onEachFeature : this.onEachFeature.bind(this)
});

onEachFeature(feature , layer) {
  // 'this' will now refer to your component's context
  let that = this;

  layer.on('click', <LeafletMouseEvent> (e) => {
      that.fitBounds = [
          [0.712, -74.227],
          [0.774, -74.125]
      ];

      // Aliased 'that' to refer to 'this' so it is in scope
      that.changeDetector.detectChanges();
  });

}

诀窍是确保您在事件处理程序let that = this上没有同样的问题。click但是，您也可以使该处理程序成为您的类中的一个函数，并使用 bind 来设置this。

于 2018-02-18T16:57:46.407 回答