Class 的变量在 Angular 2 typescript with GoJS 的函数中未被识别

Question

我有一个应用程序使用：

Angular 2
用于可视化的 GoJS

它包括：

父组件：src/app/search.component.ts

它由一个搜索栏和一些区域组成，API 调用服务器将显示按钮。
子组件：src/app/search-details.component.ts

它由一个 <div> 组成，它体现了 GoJS Radial Layout Diagram

在子组件的 SearchDetailsComponent class 中有一个名为 nodeClicked 的简单函数，如下所示：

nodeClicked(e, node) {
  // show the name of the clicked node on the console
  console.log(node.data.text);
  this.checkString = node.data.text // HERE is the ERROR....
}

每次呈现图表并且用户单击任何节点时，都会发生错误，指出：

TypeError: this is undefined

Stack-Trace:
execute/SearchDetailsComponent</SearchDetailsComponent.prototype.nodeClicked@http://run.plnkr.co/L7H44HHRrMceJAkj/src/app/search-details.component.ts!transpiled:96:21
Vh@https://unpkg.com/gojs/release/go-debug.js:539:43
Vg.prototype.standardMouseClick@https://unpkg.com/gojs/release/go-debug.js:537:201
ek.prototype.doMouseUp@https://unpkg.com/gojs/release/go-debug.js:667:73
E.prototype.doMouseUp@https://unpkg.com/gojs/release/go-debug.js:802:92
Ll/a.no@https://unpkg.com/gojs/release/go-debug.js:1012:149
ZoneDelegate.prototype.invokeTask@https://unpkg.com/zone.js/dist/zone.js:424:17
onInvokeTask@https://unpkg.com/@angular/core/bundles/core.umd.js:3956:28
ZoneDelegate.prototype.invokeTask@https://unpkg.com/zone.js/dist/zone.js:423:17
Zone.prototype.runTask@https://unpkg.com/zone.js/dist/zone.js:191:28
ZoneTask/this.invoke@https://unpkg.com/zone.js/dist/zone.js:486:28

它所指的this是在classSearchDetailsComponent.

中声明的checkString变量的那个

checkString怎么不被识别？我已经在上面定义了它。这个错误不断出现 API service 我希望每次单击节点时调用并且也调用 HTTP GET .

我做错了什么？

Live Plunker

Embed Plunker

Answer 1

Node.click属性是一个函数，不用绑定就可以调用this。

如果您需要从事件处理程序中访问外部组件，您当然可以指定一个作为闭包的 nodeClicked 函数。

Answer 2

正如@WalterNorthwoods 的回答所暗示的那样。我为 Node.click 创建了一个内联函数，如下所示：

click: (e: go.InputEvent, obj: go.GraphObject) => { this.nodeClicked(e, obj); }

现在可以调用 nodeClicked 函数并且 this.checkString 值可以完美显示。

Class 的变量在 Angular 2 typescript with GoJS 的函数中未被识别

variable of Class not being recognized in the function for Angular 2 typescript with GoJS

angular

gojs

Live Plunker

Embed Plunker