Everlive Observable

[david-quadpro]

Hi Peter,

This is probably my lack of understanding, so sorry for asking, but I cannot get the DropDown to work with data returned from Everlive (Telerik MBaaS).

I have component.html: <DropDown col="1" #dd backroundColor="red" [items]="dropdownlistSiteDropDown.items$ | async" [selectedIndex]="selectedIndex" (selectedIndexChanged)="onchange($event)" (opened)="onopen()" row="0" colSpan="2"> </DropDown> <!-- <ListPicker col="1" class="input" [items]="dropdownlistSiteDropDown.items$ | async" #dropdownlistSite (selectedIndexChange)="onSelectedPickerChanged(dropdownlistSite, 'dropdownlistSiteDropDown', 'Site')" [selectedIndex]="dropdownlistSiteDropDown.index"></ListPicker> --> and component.ts: dropdownlistSiteDropDown: any = new Object();

constructor() { this.dropdownlistSiteDropDown.items$ = new Observable(Object); this.dropdownlistSiteDropDown.itemsIndicators = new Array<Object>(); }

ngOnInit() { this.dropdownlistSiteDropDown.items$ = this.service.getDbCollection('Site').map(data => data.sort(this.sortName).map((item, index) => { if (this.item.data.Site === item.Id) { this.dropdownlistSiteDropDown.index = index; } this.dropdownlistSiteDropDown.itemsIndicators.push(item.Id); return item.Name; })); }

and service.ts: getDbCollection(dbName: String): Observable<any> { let db = new Everlive().data(dbName); let promise: Promise<any> = new Promise( (resolve, reject) => { db .get() .then(data => resolve(data.result || [])) .catch(error => reject(error)); } ); return Observable.fromPromise(promise); }

When I load the view I get: An uncaught Exception occurred on "main" thread. com.tns.NativeScriptException: Calling js method onClick failed

[object Object] File: "file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/Subscriber.js, line: 227, column: 12

StackTrace: Frame: function:'SafeSubscriber.__tryOrUnsub', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/Subscriber.js', line: 227, column: 13 Frame: function:'SafeSubscriber.next', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/Subscriber.js', line: 172, column: 22 Frame: function:'Subscriber._next', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/Subscriber.js', line: 125, column: 26 Frame: function:'Subscriber.next', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/Subscriber.js', line: 89, column: 18 Frame: function:'Subject.next', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/rxjs/Subject.js', line: 55, column: 25 Frame: function:'EventEmitter.emit', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 4090, column: 80 Frame: function:'NgZone.checkStable', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 4356, column: 44 Frame: function:'NgZone.onLeave', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 4432, column: 18 Frame: function:'onInvoke', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 4394, column: 31 Frame: function:'ZoneDelegate.invoke', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 189, column: 34 Frame: function:'Zone.run', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js', line: 83, column: 43 Frame: function:'NgZone.run', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/@angular/core/bundles/core.umd.js', line: 4260, column: 66 Frame: function:'zonedCallback', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/nativescript-angular/renderer.js', line: 212, column: 24 Frame: function:'Observable.notify', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 149, column: 23 Frame: function:'Observable._emit', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/tns-core-modules/data/observable/observable.js', line: 168, column: 18 Frame: function:'onClick', file:'file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules/tns-core-modules/ui/button/button.js', line: 35, column: 32

at com.tns.Runtime.callJSMethodNative(Native Method)
at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1197)
at com.tns.Runtime.callJSMethodImpl(Runtime.java:1061)
at com.tns.Runtime.callJSMethod(Runtime.java:1047)
at com.tns.Runtime.callJSMethod(Runtime.java:1028)
at com.tns.Runtime.callJSMethod(Runtime.java:1018)
at com.tns.gen.android.view.View_OnClickListener.onClick(android.view.View$OnClickListener.java)
at android.view.View.performClick(View.java:5623)
at android.view.View$PerformClick.run(View.java:22433)
at android.os.Handler.handleCallback(Handler.java:751)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:154)
at android.app.ActivityThread.main(ActivityThread.java:6311)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:872)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:762)

Any pointers?

Thanks in advance and sorry for asking what it a newbie question that I am sure is entirely my fault,

David

[david-quadpro]

Update 1: I think the crash error is due to the array having less than 2 items in at time of loading.

[PeterStaev]

Hey @david-quadpro , something in your constructor does not look correct. You have this.dropdownlistSiteDropDown.items$ = new Observable(Object) , but what is this object? I suggest you start with a local mock object array to see that your other code set up works, and once you have it working to link the Telerik Platform code.

[david-quadpro]

Hi @PeterStaev,

I have done the following successfully:

• Used "dropdownlistSiteDropDown.items$ | async" with a ListPicker
• Used the code from README.md and assigned the resulting items array.

I am quite new to angular / NativeScript / typescript so I am not 100% sure what you mean by a local mock object array. Please can you clarify.

David

[PeterStaev]

@david-quadpro , I meant to create a local observable eliminating the services like so: https://angular-2-training-book.rangle.io/handout/observables/using_observables.html and then trying to bind the drop down to that.

[PeterStaev]

No further response so closing this one for now. In case you still have problems, please reopen and provide more details.