Question

我刚刚开始使用Angular，这个问题已经困扰了我几个小时：

最初，我只在Javascript中编写了一个小测试应用程序。现在我想切换到TypeScript，基本上可以正常工作。除了一件事：我创建了一个自定义时间范围过滤器，我无法在我的应用程序的Typescript版本中工作。

的index.html：

<div ng-controller "MyController as ctrl">
    <input id="date_from_filter" ng-model="ctrl.dateFromFilter" />
    <input id="date_to_filter" ng-model="ctrl.dateToFilter" />


    <table>
        <tr ng-repeat="event in ctrl.events | filter:ctrl.rangeFilter">
            <td>{{event.id}}</td>
            <td>{{event.timestamp}}</td>
            <td>{{event.value}}</td>
        </tr>
</div>

controller.js

class MyController {
    dateFromFilter: string;
    dateToFilter: string;

    constructor(public helperService: app.services.HelperService) { }

    rangeFilter(event) {
        // Compare mechanism, accessing this.dateFromFilter and this.dateToFilter and using helperService
        // But: `this` is always null in here
    }
}

任何人都可以给我一个如何做到这一点的暗示吗？我认为我无法访问这个，因为rangeFilter方法中的范围不同。但我的选择是什么？

谢谢！

更新：

我被抛出TypeError: Unable to get property 'dateFromFilter' of undefined or null reference（* .js：30：33）

以下是已编译的Javascript：

MyController.prototype.rangeFilter = function (event) {
    var x = new Date(this.dateFromFilter);
    //... more stuff..
}

Answer 1

我已经在我目前的角度TS项目中测试了以下代码，它似乎工作正常，如果您有任何问题，请给我发表评论。如果您需要有关rangeFilter()功能正在执行的操作的更多信息，请在debugger;功能的第一行添加rangeFilter()。

class MyController {
    public dateFromFilter: string;
    public dateToFilter: string;

    public static $inject: string[] = ["$scope"];

    constructor(public $scope: ng.IScope, public helperService: app.services.HelperService) {}

    public rangeFilter(event) {
        this.dateFromFilter // will be null until set
        this.dateToFilter // will be null until set
        this.$scope // will give you the scope of the controller
    }
}

AngularJS + TypeScript：在过滤函数

1 个答案: