ng-lightning - 查找时未定义数据对象答案

【问题标题】：ng-lightning - data object is undefined on lookupng-lightning - 查找时未定义数据对象
【发布时间】：2016-05-13 15:28:23
【问题描述】：

我正在使用 Lookup 组件，并收到一个错误，指出我的数据对象未定义，因此无法使用 .filter()。代码如下：

getAllAccounts() {
    this._quickAddService.getAllAccounts()
        .subscribe(
        accounts => this.getAllAccountsFinished(accounts),
        error => this.errorMessage = <any>error);
}

getAllAccountsFinished(accounts:any) {
    this.accounts = accounts;
    console.log(this.accounts);

    this.hideSpinner();
}

ngOnInit(){
    this.getAllAccounts();
}

lookup(query: string): Account[] {
    if (!query) {
        return null;
    }

    return this.accounts.filter((item) => item.name.toLowerCase().indexOf(query.toLowerCase())>-1);
}

console.log 显示服务完成返回后数据已正确绑定。但是，当在输入时触发查找时 this.accounts 未定义。

【问题讨论】：

从哪里调用lookup？
是模板中元素绑定的属性：<ngl-lookup [lookup]="lookup" field="name" (pick)="onPick($event)" debounce="0" placeholder="Hint: type words"> <span nglLookupLabel>Quick search an account</span> </ngl-lookup>
这就是为什么在 Angular 中创建 @Output() lookup = new EventEmitter() 在 <ngl-lookup> 中并像 <ngl-lookup (lookup)="lookup($event)" 那样绑定到它比传递函数更好。
@GunterZochbauer 是的，没错，但在我们的例子中，我不想让用户处理它；）github.com/ng-lightning/ng-lightning/blob/master/src/lookups/…
我明白了。似乎有道理。感谢您的反馈！

标签： angular ng-lightning

【解决方案1】：

@bekos 在Gitter 上回答。需要给组件构造函数添加绑定：

constructor(elementRef:ElementRef, private _quickAddService:QuickAddService) { 
    this.visible = true;

    this.lookup = this.lookup.bind(this);
}

【讨论】：

是的，我怀疑 :)
感谢您的快速回复！最重要的是:)
我试过了，说我要等两天才能标记自己的答案。 ://

【解决方案2】：

只是对此的一个小评论;-)

在 TypeScript 中封装查找方法可能比使用 bind 方法更好，因为这样会丢失类型检查。

类似这样的：

this.lookup = (query) => {
  this.lookup(query);
};

查看此链接了解更多详情：

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

【讨论】：