如何在打字稿应用程序中创建 Angular-DataTable答案

【问题标题】：How to create Angular-DataTable in typescript application如何在打字稿应用程序中创建 Angular-DataTable
【发布时间】：2016-11-27 03:49:41
【问题描述】：

大家好，我正在研究打字稿，角度应用程序。

为了创建数据表，我使用了 Angular-DataTable 。

从那里我创建了一个示例应用程序。我创建了一个控制器，并在其中添加了以下代码。

constructor(protected $scope: ng.IScope, protected $element: ng.IAugmentedJQuery, protected $timeout: ng.ITimeoutService,
    protected dtOptionsBuilder: any, protected dTColumnDefBuilder:any) {

    var self = this;

    this.dtOptions = dtOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('bInfo', false)
        .withOption('bPaginate', false)
        .withOption('searching', false)
        .withOption('paging', false)
        .withOption('order', [0, 'desc']);

    this.dtColumnDefs = [
        dTColumnDefBuilder.newColumnDef(0),
        dTColumnDefBuilder.newColumnDef(1),
        dTColumnDefBuilder.newColumnDef(2),
        dTColumnDefBuilder.newColumnDef(3),
        dTColumnDefBuilder.newColumnDef(4),
        dTColumnDefBuilder.newColumnDef(5).notSortable()
    ];

我在模块依赖项中添加了“数据表”。运行此应用程序后。我得到以下错误。

angular.js:13424TypeError: Cannot read property 'newOptions' of undefined
at new Controller (app.controller.js:17)
at Object.invoke (angular.js:4625)
at S.instance (angular.js:10027)
at n (angular.js:8965)
at angular.js:9362
at angular.js:15757
at m.$eval (angular.js:17025)
at m.$digest (angular.js:16841)
at m.$delegate.__proto__.$digest (<anonymous>:844:31)
at m.$apply (angular.js:17133)

你能告诉我，这是在类型脚本中实现 angular-dataTable 的方式。如何将 DtoptionBuilder 和 DtColumnDefBuilder 添加到我的项目中。

【问题讨论】：

标签： jquery angularjs typescript datatables angular-datatables

【解决方案1】：

你需要注入这两个DTOptionsBuilder和DTColumnBuilder

修改后的代码

constructor(protected $scope: ng.IScope, protected $element: ng.IAugmentedJQuery, protected $timeout: ng.ITimeoutService,
    protected DTOptionsBuilder: any, protected DTColumnBuilder:any) {

    var self = this;

    this.dtOptions = this.DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(10)
        .withOption('bInfo', false)
        .withOption('bPaginate', false)
        .withOption('searching', false)
        .withOption('paging', false)
        .withOption('order', [0, 'desc']);

    this.dtColumnDefs = [
        this.DTColumnBuilder.newColumnDef(0),
        this.DTColumnBuilder.newColumnDef(1),
        this.DTColumnBuilder.newColumnDef(2),
        this.DTColumnBuilder.newColumnDef(3),
        this.DTColumnBuilder.newColumnDef(4),
        this.DTColumnBuilder.newColumnDef(5).notSortable()
    ];
}

【讨论】：