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.

it is a property bound to the element in the template: ` Quick search an account ` — Matthew Ford, May 13 '16 at 15:33
Thats why it is usually better in Angular to create an `@Output() lookup = new EventEmitter()` in `` and bind to it like ` — Günter Zöchbauer, May 13 '16 at 15:36
@GunterZochbauer Yes that's true, but in our case there is some "gymnastic" that I don't want to let user handle it ;) https://github.com/ng-lightning/ng-lightning/blob/master/src/lookups/lookup.ts#L100 — bekos, May 13 '16 at 16:55

score 2 · Accepted Answer · answered May 13 '16 at 15:30

2

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

answered May 13 '16 at 15:30

Matthew Ford

31
1
5

Yup, was my suspicion :) – Günter Zöchbauer May 13 '16 at 15:31
Thanks for the quick response though! On top of it :) – Matthew Ford May 13 '16 at 15:40
I tried, says I have to wait two days to mark my own answer. :/ – Matthew Ford May 13 '16 at 17:03

score 0 · Answer 2 · answered May 13 '16 at 17:12

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

ng-lightning - data object is undefined on lookup

2 Answers2

Linked