圍繞服務實例化的劍道網格奇怪行為

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();
}