围绕服务实例化的剑道网格奇怪行为

Question

我在 Angular 模板中使用 Kendo Grid 并尝试允许组件中的服务定义一些 css 样式但遇到问题。

<kendo-grid
*ngIf="canLoad()"
[data]=etc...
[rowClass] = "rowCallback"
>

public canLoad() : boolean
{
  return this.myservice !== undefined;
}

public rowCallback(context: RowClassArgs)
{
  this.myservice.doSomething();
}

我收到错误消息“无法读取未定义的属性（读取‘doSomething’）” ...为什么当 ngIf 检查已将 myservice 评估为已实例化时我会收到错误消息？ 如何让 rowCallback 等待服务实例化？

Answer 1

在上面的例子this.myservice.doSomething() this没有指向组件 class object，所以 myservice 是未定义的。

要解决此问题，您可以

1. 分配rowClass时将其绑定this方法

<kendo-grid
*ngIf="canLoad()"
[data]=etc...
[rowClass] = "rowCallback.bind(this)"
>

2. 使用箭头 function 定义rowCallback

public rowCallback = (context: RowClassArgs) => {
  this.myservice.doSomething();
}