javascript - typescript + Angular : variable changing context

Question

自从我从 JavaScript 转换到 TypeScript(版本 2.1.5)后，以下过滤日期选择的代码不再起作用。我想我知道为什么，但目前我还没有找到好的解决办法。

这是我的两个日期选择器:从和到:

                             <div class="form-group">
                                <label class="label label-letter-spacing">From </label>
                                <div class='input-group date' id='datepickerFrom'>
                                    <md-datepicker ng-model="vm.dateFrom"></md-datepicker>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="label label-letter-spacing">To </label>
                                <div class='input-group date' id='datepickerTo'>
                                    <md-datepicker ng-model="vm.dateTo" md-date-filter="vm.onlyGreaterThanFromDate" ></md-datepicker>
                                </div>
                            </div>

在 Controller.ts 中我有:

        dateTo: Date;
        dateFrom: Date;

        onlyGreaterThanFromDate(date) {
           if (this.dateFrom != undefined )
               return (date.getTime() > this.dateFrom.getTime());
        };

在浏览器(chrome)中调试时，我注意到当执行此方法时，上下文发生了变化，并且 this 不再代表我的 Controller ，而是代表 CalendarCtrl ，因此， this.dateFrom 未定义。

我尝试了一些调整，将 dateFrom 属性设置为静态或私有(private)，但两者都不起作用。

我仍在寻找，并期待阅读您对此的评论/想法。 :)谢谢你

Answer 1

非常感谢曹洪的回答。这是正确的代码，我在 TypeScript 中学到了一个有用的功能:)

所以我重新发布解决方案:

In Typescript you can use arrow function to preserve the context. Something like: onlyGreaterThanFromDate = (date) => { if (this.dateFrom != undefined ) return (date.getTime() > this.dateFrom.getTime()); };