Question

嗨，我正在尝试使用viser-ng，我需要调用函数onClick事件。

但是当我尝试在调用函数中使用this时，出现错误this is undefined。

<v-chart [forceFit]="forceFit" [height]="height" [data]="data" [onClick]="clickbar"></-chart>

在我的组件中

clickbar(e: any) {
    console.log('clickbar', e.target); // return clicked data
    console.log("this", this); // return undefined

    this.openDialog(e.data._origin) // error
}

openDialog(data): void {
  console.log(data) // error
}

您能解释一下如何调用我的openDialog函数吗？

尝试(click)="clickbar($event)"但$event返回mouseevent而不是clickedData

Answer 1

在您的组件中，尝试定义一个包含this的变量。

例如

public thisRef;


constructor(){
    this.thisRef = this;
}

在HTML中，您应该可以做到

<v-chart [onClick]="clickbar.bind(thisRef)">...

通过这种方式，您可以将thisRef（实际上是this）绑定到函数内部的this。

Answer 2

我相信您正在使用输入绑定“方括号：[]”，并希望使用事件绑定“方括号：()”，如下所示：

<v-chart [forceFit]="forceFit" [height]="height" [data]="data" (click)="clickbar($event)"></-chart>

编辑：

看起来控制器上有一个@Input的数据，并更改了openDialog的签名：

在component.ts文件中

@Input data: any; // This should already exist given the v-chart HTML

openDialog(): void {
  console.log(this.data) // error
}

在HTML文件中

<v-chart [forceFit]="forceFit" [height]="height" [data]="data" (click)="openDialog()"></-chart>

没有括号的调用函数

2 个答案: