事件处理程序中的调用函数

时间:2019-04-29 09:37:28

标签: angular typescript

我现在从事件处理程序中获取一个ID,我想使用该ID调用服务方法,但出现方法未定义的错误。请纠正我,因为我是Angular的新手。 错误TypeError:无法读取未定义的属性'getTaxByCategory'

component.ts

categoryChanged(event: any){
  //console.log(event.previousValue);
  this.categoryId = event.value;
  this.taxService.getTaxByCategory(this.categoryId).subscribe(result => {
    console.log(result);
  })
}

服务方法

public getTaxByCategory(categoryId: number): Observable < any > {
  return this.taxes = this.apollo.watchQuery<Query["taxGet"]>(
    { query: taxGetByCategory, variables: { categoryId } }
  ).valueChanges.pipe(map(({ data }: { data: any }) => {
    console.log("returned Data");
    return data.taxGet;
  }));
}

HTML

<dxi-item itemType="group">
            <dxi-item   [label]="{ text: '  Category ' }"
            dataField="categoryId"
            alignment="right"
            editorType="dxSelectBox" 
            [editorOptions]="{
                items: category,
                placeholder: 'Select Category ',
                displayExpr: 'categoryName',
                valueExpr: 'id',
                showClearButton: 'true',
                onValueChanged: categoryChanged
                 }">
              </dxi-item>

1 个答案:

答案 0 :(得分:1)

问题是传递onValueChanged: categoryChangedcategoryChanged有自己对this的引用(this不再是组件)。将categoryChanged更改为箭头功能即可完成这项工作。

箭头函数在进一步传递时会保留对this的引用。

categoryChanged = (event: any) => {
  //console.log(event.previousValue);
  this.categoryId = event.value;
  this.taxService.getTaxByCategory(this.categoryId).subscribe(result => {
    console.log(result);
  })
}

您可以在this SO question

中找到有关此信息的更多信息