ng-lightning - data object is undefined on lookup

Question

I'm working with the Lookup component and am getting an error that my data object is undefined and thus cannot .filter(). Code is below:

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);
}

that console.log is showing that the data is bound properly once the service finishes returning. However when lookup is fired on input this.accounts is undefined.

Answer 1

Answered by @bekos on the Gitter. Need to add binding to component constructor:

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

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

Answer 2

Just a small comment regarding this ;-)

It's perhaps better to wrap your lookup method instead of using the bind method in TypeScript because you will lose type checking.

Something like this:

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

See this link for more details:

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