javascript - 在 handsontable 中按下按钮不会触发事件

Question

这是我在 Angular 4 中的组件类

 @Component({
    selector: 'food-list',
    templateUrl: 'foodList.component.html'
    })

    export class FoodListComponent implements OnInit {

     searchFoodForm: FormGroup;
     Food_foodName_eq: FormControl;
     Food_rating_eq: FormControl;
     Food_restaurants_restName_eq: FormControl;
     columns: object[] = [
      {data: 'id', title: 'Id'},
      {data: '11', title: 'rating'},
      {data: 'description', title: 'Description'},
      {data: 'foodName', title: 'Food Name', width: 200},
      {data: '<button (click)= 'editFood(1)'> Edit <button>', title: 'edit', 
      renderer: 'html'},
     ];
     instance: string = "hotInstance";
     data = [];

     constructor(private foodService: FoodService, private fb: FormBuilder,private _hotRegisterer: HotRegisterer) {
     this.createSearchForm();
    }

    createSearchForm() {
    this.searchFoodForm = this.fb.group({
      Food_foodName_eq: '',
      Food_rating_gt: '',
      Food_restaurants_restName_eq:''
     });
    }

    searchFood() {
     let searchParam = { "params": JSON.stringify(this.searchFoodForm.value) };
     this.fetchData(searchParam);
    }

    fetchData(searchParam){
     if(searchParam == "" || searchParam == undefined){
      searchParam = {"params" : searchParam};
     }
     this.foodService.getAll(searchParam).subscribe(suc => {
      let dataSchema = suc ;
      this.data = dataSchema["data"];
      this.columns = dataSchema["schema"];
     },
     err => {
      console.log("Something is wrong");
     })
    }

    ngOnInit() {
     let searchParam = "";
     this.fetchData(searchParam);

    }

    editFood(id:any){
     alert("uuuu");
    }

    }

这是我的 component.html

   <hot-table
   height="250"
   [columns]="columns"
   [data]="data">
   </hot-table>

数据出现在 handson 表中。我在表中有一个编辑按钮。我想在按下编辑按钮时调用“editFood(id:any)”函数，但它没有触发。我将单元格渲染为 html。我如何将此事件与 handsontable 绑定(bind)？控制台中没有显示错误。如果我使用警报功能而不是 editFood 功能，则会触发它

我是否需要为按钮使用自定义渲染器？

Answer 1

关键是使用 afterOnCellMouseDown() 钩子(Hook)。在表格中构造按钮时，为其指定一个 class，但不要包含 (click) 事件。

{data: '<button class="my-btn"> Edit </button>', title: 'edit', renderer: 'html'}

在您的 HTML 中:

<hot-table hotId="myTable"
           height="250"
           [columns]="columns"
           [data]="data"
           (afterOnCellMouseDown)="myFunc($event)">
</hot-table>

然后在你的组件中

public myFunc(event) {
    if (event[0].realTarget.className.indexof('my-btn') > 0) {
        row = event[1].row
        const hotInst = this._hotRegisterer.getInstance('myTable')
        const id = hotInst.getDataAtRowProp(row, 'id')
        this.editFood(id)
    }
}

有关更完整的示例，请参阅 this jsbin