Angular2 'this' 未定义
Posted
技术标签:
【中文标题】Angular2 \'this\' 未定义【英文标题】:Angular2 'this' is undefinedAngular2 'this' 未定义 【发布时间】:2016-08-21 09:52:14 【问题描述】:我的代码如下所示:
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 例外:类型错误:无法读取属性 'createQuery' of undefined in [null]
原始异常: TypeError:无法读取未定义的属性“createQuery”
所以基本上,return this.createQuery(queryParams)
语句中的this
将为空。有谁知道这怎么可能?
【问题讨论】:
你认为this.createQuery
为什么存在?
您的 2 个班级缺少右括号是否“正常”?
我只是省略了不必要的部分,否则代码在语法上是正确的。 :) 问题不在于.createQuery
,而在于this
本身。
【参考方案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【讨论】:
谢谢,它似乎工作!有没有办法在 HTML 模板绑定中做到这一点?我的意思是,我有以下代码:(onLazyLoad)="loadItems($event, this.crService.getCRs)"
我也可以将其转换为类似的东西吗? (onLazyLoad)="loadItems($event, (page, n, sortField, sortOrder, filters) => return this.crService.getCRs(page, n, sortField, sortOrder, filters))"
太棒了!您不需要在模板中使用 this
关键字。也就是说,我会使用中间级别。我的意思是:在 loadItems
方法中使用 this.crService.getCRs...
很好,我也得到了这个解决方案。这似乎也比在我的 HTML 模板中嵌入如此丑陋的代码要干净得多。谢谢您的帮助! :)【参考方案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' 未定义的主要内容,如果未能解决你的问题,请参考以下文章
Angular2:尝试使用 @ViewChild 注释将焦点设置到输入字段时出现未定义的错误