Question

我的代码如下：

export class CRListComponent extends ListComponent<CR> implements OnInit {

    constructor(
        private router: Router,
        private crService: CRService) {
        super();
    }

    ngOnInit():any {
        this.getCount(new Object(), this.crService.getCount);
    }

ListComponent代码是这个

@Component({})
export abstract class ListComponent<T extends Listable> {

    protected getCount(event: any, countFunction: Function){
        let filters = this.parseFilters(event.filters);
        countFunction(filters)
            .subscribe(
                count => {
                    this.totalItems = count;
                },
                error => console.log(error)
            );
    }

来自CRService的相应服务代码片段是这样的：

getCount(filters) {
    var queryParams = JSON.stringify(
        {
            c : 'true',
            q : filters
        }
    );

    return this.createQuery(queryParams)
        .map(res => res.json())
        .catch(this.handleError);
}

现在当ngOnInit()运行时，我收到错误：

angular2.dev.js：23925 EXCEPTION：TypeError：无法读取属性   [null]中未定义的'createQuery'

原始例外：   TypeError：无法读取未定义的属性“createQuery”

基本上，this语句中的return this.createQuery(queryParams)将为null。有人知道这有可能吗？

Answer 1

问题出在这里：

gOnInit():any {
    this.getCount(new Object(), this.crService.getCount); // <----
}

因为您引用了对象外部的函数。您可以在其上使用bind方法：

this.getCount(new Object(), this.crService.getCount.bind(this.crService));

或将其包装成箭头功能：

this.getCount(new Object(), (filters) => {
  return this.crService.getCount(filters));
});

第二种方法是首选方法，因为它允许保留类型。有关详细信息，请参阅此页：

https://basarat.gitbooks.io/typescript/content/docs/tips/bind.html

Answer 2

为了修复这个错误，我把所有内脏从我的函数中拉出来导致错误并将其扔到另一个函数中然后错误就消失了。

示例：

我有这个函数，里面有一些代码

this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
  // bunch of code to evaluate click event
  // this is the code that had the "this" undefined error
});

我将代码拉出并将其放入外部公共函数中，这是完成的代码：

this.globalListenFunc = renderer.listenGlobal('document', 'click', (event) => {
  this.evaluateClick(event);
});

evaluateClick(evt: MouseEvent){
    // all the code I yanked out from above
}

Angular2'this'未定义

2 个答案: