Observable with NativeScript-Drop-Down plugin


#1

Hi,

I am using Telerik Platform with NativeScript 2.5.1, Angular 2.4.3 and nativescript-drop-down 1.5.5.

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 the error below. I think this is due to there being less than 2 items in the array on loading.

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//bundles/core.umd.js’, line: 4090, column: 80
Frame: function:‘NgZone.checkStable’, file:‘file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules//bundles/core.umd.js’, line: 4356, column: 44
Frame: function:‘NgZone.onLeave’, file:‘file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules//bundles/core.umd.js’, line: 4432, column: 18
Frame: function:‘onInvoke’, file:‘file:///data/data/com.quadpro.qplusrequest/files/app/tns_modules//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//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