引导表列选项格式化程序函数在组件中找不到函数？答案

【问题标题】：bootstrap table Column options formatter function can not found the function in the component?引导表列选项格式化程序函数在组件中找不到函数？
【发布时间】：2017-11-06 07:39:48
【问题描述】：

我在 angular cli 项目中编写了一个使用 angular4 的组件。然后我使用 bootstrap-table(http://bootstrap-table.wenzhixin.net.cn/documentation/) 在这个组件中。代码是这样的：

import { ***  } from '@angular/core';


@Component({
  selector: 'app-template',
  templateUrl: './template.component.html',
  styleUrls: ['./template.component.less']
})
export class TemplateComponent implements OnInit , OnDestroy  {

   constructor() {
    const that = this;//the point is here
    that.showMessage('message');// run  correct ,can use that
  }
    columnDefs : any[] = [//defined the table column
    {
      checkbox: true
    },
    {
      title: this.translate.instant('template.template'),
      field: 'name',
      width: 200,
      sortable: true,
      events: 'operateEvents',
      formatter:  (value : any, row : any, index : any) =>  {
        that.showMessage(value);/// the point is here  ,// run  error ,can not use that    
      }
    }]

    gridOptions : {} = {//defined the table 
    pagination: true,
    escape: true,
    pageSize: 10,
    pageList: [10, 25, 50, 100],
    search: true,
    strictSearch: false,
    searchText: '',
    paginationDetailHAlign: 'left',
    paginationHAlign: 'left',
    clickToSelect: false,
    sortable: true,
    toolbar: '#toolbar-template-toolbar',
  };
  
  

 
  showMessage(value:any) {
     console.log('this.is a message ',value);
  } 
  ngOnInit() {
     $('#table-template').bootstrapTable($.extend(this.gridOptions, {
      columns: that.columnDefs,
      data: [],
    }));
  }
  

}

但是 angular cli 显示这样的错误：

/root/code/***/src/app/template/template.component.ts (106,9) 中的错误：找不到名称“那个”。

enter image description here

上下文（this）是列对象。所以要访问 showMessage ，我必须使用它.. 但为什么？？？？？为什么会发生错误？？？谢谢你的帮助！！！！

【问题讨论】：

你想用“那个”做什么。你可以用这个来代替这个。
@Subbu bootstrap table 文件表示格式化函数，上下文（this）是列Object。单元格格式化函数，取三个参数： value：字段值。 row：行记录数据。 index：行索引。这意味着格式化程序函数中的“this”是指向列对象的指针，而不是全局中的“this”

标签： typescript this angular-cli bootstrap-table

【解决方案1】：

“那个”变量是构造函数的局部范围。因此，您在引用它的地方“找不到”。要解决您的问题，请不要使用“那个”变量方法。将 columnDefs 值分配给局部变量并在 jQuery 方法中使用它。

ngOnInit() {
     let columDefs= this.columnDefs; //assign into local var
     let girdOpt = this.gridOptions; //assign into local var
     $('#table-template').bootstrapTable($.extend(girdOpt, {
      columns: columnDefs, //Use here
      data: [],
    }));
  }

【讨论】：