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: <ngl-lookup [lookup]="lookup" field="name" (pick)="onPick($event)" debounce="0" placeholder="Hint: type words"> <span nglLookupLabel>Quick search an account</span> </ngl-lookup> — Matthew Ford
– Matthew Ford, Commented May 13, 2016 at 15:33
Thats why it is usually better in Angular to create an @Output() lookup = new EventEmitter() in <ngl-lookup> and bind to it like <ngl-lookup (lookup)="lookup($event)" than passing around functions. — Günter Zöchbauer
– Günter Zöchbauer, Commented May 13, 2016 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 ;) github.com/ng-lightning/ng-lightning/blob/master/src/lookups/… — bekos
– bekos, Commented May 13, 2016 at 16:55

Matthew Ford · Accepted Answer · 2016-05-13 15:30:44Z

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, 2016 at 15:30

Matthew Ford

311 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Günter Zöchbauer Over a year ago

Yup, was my suspicion :)

Matthew Ford Over a year ago

Thanks for the quick response though! On top of it :)

Matthew Ford Over a year ago

I tried, says I have to wait two days to mark my own answer. :/

Thierry Templier · Accepted Answer · 2016-05-13 17:12:45Z

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

Collectives™ on Stack Overflow

ng-lightning - data object is undefined on lookup

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related