在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");
    }

    }

这是我的组件.html文件

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

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

我应该使用自定义渲染器来创建按钮吗？

- user3692033

---

你不能这样做，因为Angular需要编译HTML才能捕获你的绑定。 - Milad

嗨@Milad，如果我在handsontable中放置一个编辑按钮，它不会触发任何函数吗？这怎么可能是合理的呢？ - user3692033

就像我之前所说的，这段代码需要通过Angular进行编译并注入到DOM中，但是你正在使用另一个库来完成这个过程，并期望Angular能够理解它！这是不可能的，你不能使用(click)事件，尝试使用普通的JavaScript事件，例如onclick="yourGlobalFunction()"。 - Milad

谢谢@milad.i。我在Angular 5的HandsonsonTable包装器中创建了一个自定义渲染器，但我找不到注册它的方法。没有“registerRenderer”方法。因此，在控制台中显示错误，如“未找到名称为“coverRenderer”的已注册渲染器”。你能解释一下吗？再次感谢你的时间。 - user3692033

Answer 1

关键是使用 afterOnCellMouseDown() 钩子。在构建表格中的按钮时，给它一个 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。

- TSmith