在 Angular2 中更改 Select2 的数据和 processResults 上下文

Question

我在我的 Angular2 应用程序中使用 Select2，我需要在数据和 processResults 中使用一些 class 属性。但是，这些上下文不是 class 上下文：

export class DefaultFormInputSelectComponent {

    @Input() private validator;

    private select2Options() {

        return {
            ajax: {
                url: 'api',
                dataType: 'json',
                delay: 250,
                data: this.ajaxData,
                processResults: this.ajaxProcessResults
            }
        }

    };

    ajaxData = function(params) {

        // this variable is not in DefaultFormInputSelectComponent context

        this.validator; // returns undefined, but it is not in DefaultFormInputSelectComponent context

    }

    ajaxProcessResults = function(data) {
        // same issue as ajaxData
    }

}

我尝试在 ajax 属性中添加 context: this 但没有任何改变。

Answer 1

如果你读过一些关于 typescript 的东西，你会发现在类中你不应该使用 function 关键字，而且像这样绑定回调会导致 this要放置到函数的上下文。您应该使用箭头函数符号来创建您的函数或使用 bind。或者你可以使用匿名箭头函数包装器 :) 你决定你最喜欢什么：

export class DefaultFormInputSelectComponent {

    @Input() private validator;

    private select2Options(): any {
        return {
            ajax: {
                url: 'api',
                dataType: 'json',
                delay: 250,
                data: this.ajaxData,
                processResults: this.ajaxProcessResults.bind(this),
                anotherCallback: (data) => {
                    this.processAnother(data);
                }
            }
        }

    }

    private ajaxData: Function = (params: any): void => {
        console.log(this); //DefaultFormInputSelectComponent 
    };

    private ajaxProcessResults(data: any): void {
        console.log(this); //DefaultFormInputSelectComponent 
    }

    private processAnother(data: any): void {
        console.log(this); //DefaultFormInputSelectComponent 
    }
}

在 Angular2 中更改 Select2 的数据和 processResults 上下文

Change data and processResults context for Select2 in Angular2

javascript

jquery

angular

typescript

select2