Question

这是我在角度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。我怎么能用handontable绑定这个事件？控制台中没有显示错误。如果我使用alert函数而不是editFood函数，则会触发

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

Answer 1

关键是使用afterOnCellMouseDown（）挂钩。在表中构造按钮时，请为其提供一个类，但不要包括（单击）事件。

{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)
    }
}

有关更完整的示例，请参见https://jsbin.com/heqijexeci/1/edit?html,js,output

按下按钮时不会触发事件

1 个答案: