search

triniwiz / nativescript-accordion

Apache License 2.0
38 stars 14 forks source link

Accordion does not work with data that is not hard coded #69

Open Lightk3ira opened 5 years ago

Lightk3ira commented 5 years ago

Make sure to check the demo app(s) for sample usage

Checked samples.

Make sure to check the existing issues in this repository

Checked issues.

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital letter. The demo app uses a hard coded array of items. The demo works in my project. When I switch the array to mine that uses an api call to return data it does not work. I have tried both async and non async. Working only for hard-coded data makes this plugin unusable.

Which platform(s) does your issue occur on?

Please, provide the following version numbers that your issue occurs with:

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it. Step 1: Copy demo code. Step 2: Use data from api call Step 3: Nothing is shown or clicking on an accordian makes the app crash (this is the issue)

Is there any code involved?

<Accordion height="100%" [items]="myItemsArrayFromApi" allowMultiple="false" [selectedIndexes]="selectedIndexes">

    <ng-template` let-i="index" let-item="item" acTemplateKey="title">
        <StackLayout  height="200" backgroundColor="white">
           <Label backgroundColor="green" [text]="title"></Label>
     </StackLayout>
    </ng-template>

    <ng-template let-i="index" let-item="item" acTemplateKey="content">
        <StackLayout  height="200">
       <Label backgroundColor="green" [text]="content"></Label>
        </StackLayout>
    </ng-template>
</Accordion>
Lightk3ira commented 5 years ago

Update of stack trace: Shows up but crashing on tap

JS: ERROR TypeError: Cannot read property 'length' of undefined JS: ERROR CONTEXT { JS: "view": { JS: "def": { JS: "nodeFlags": 370591745, JS: "rootNodeFlags": 33554433, JS: "nodeMatchedQueries": 2, JS: "flags": 0, JS: "nodes": [ JS: { JS: "nodeIndex": 0, JS: "parent": null, JS: "renderParent": null, JS: "bindingIndex": 0, JS: "outputIndex": 0, JS: "checkIndex": 0, JS: "flags": 33554433, JS: "childFlags": 337037313, JS: "directChildFlags": 1492993, JS: "childMatchedQueries": 2, JS: "matchedQueries": {}, JS: "matchedQueryIds": 0, JS: "references": {}, JS: "ngContentIndex": null, JS: "childCount": 7, JS: "bindings": [ JS: { JS: "flags": 8, JS: "ns": "", JS: "name": "selectedIndexes", JS: "nonMinifiedName": "selectedIndexes", JS: "securityContext": 0 JS: } JS: ], JS: "bindingFlags": 8, JS: "outputs": [], JS: "element": { JS: "ns": "", JS: "name": "Accordion", JS: ... System.err: com.tns.NativeScriptException: System.err: Calling js method getChildrenCount failed System.err: System.err: TypeError: Cannot read property 'length' of undefined System.err: File: "file:///data/data/com.panibus.mobile/files/app/vendor.js, line: 140886, column: 76 System.err: System.err: StackTrace: System.err: Frame: function:'push.../node_modules/nativescript-accordion/accordion.js.AccordionListAdapter.getChildrenCount', file:'file:///data/data/com.panibus.mobile/files/app/vendor.js', line: 140886, column: 77 System.err: System.err: at com.tns.Runtime.callJSMethodNative(Native Method) System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1203) System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:1083) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1070) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1050) System.err: at com.tns.Runtime.callJSMethod(Runtime.java:1042) System.err: at com.tns.gen.android.widget.BaseExpandableListAdapter_vendor_140620_28_AccordionListAdapter.getChildrenCount(BaseExpandableListAdapter_vendor_140620_28_AccordionListAdapter.java:24) System.err: at android.widget.ExpandableListConnector.refreshExpGroupMetadataList(ExpandableListConnector.java:563) System.err: at android.widget.ExpandableListConnector.expandGroup(ExpandableListConnector.java:688) System.err: at android.widget.ExpandableListView.handleItemClick(ExpandableListView.java:693) System.err: at android.widget.ExpandableListView.performItemClick(ExpandableListView.java:653) System.err: at android.widget.AbsListView$PerformClick.run(AbsListView.java:4094) System.err: at android.widget.AbsListView$10.run(AbsListView.java:6582) System.err: at android.os.Handler.handleCallback(Handler.java:789) System.err: at android.os.Handler.dispatchMessage(Handler.java:98) System.err: at android.os.Looper.loop(Looper.java:164) System.err: at android.app.ActivityThread.main(ActivityThread.java:6944) System.err: at java.lang.reflect.Method.invoke(Native Method) System.err: at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327) System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

Lightk3ira commented 5 years ago

I believe I found the issue it seems to be with 'childItems' and it defaults to 'items'. I am not sure why this is required at all. I have an array like this:

[ {name: Joe, age 24, bannerImage: 'http://...' }, {name: Dan, age 43, bannerImage: 'http://...' } ]

I believe this should be fine as I am just looping an array of objects. I do not see any docs specific on this property or how to ignore it.

arnasdev commented 4 years ago

I was able to overcome this issue by nesting my array,

   public vehicles: Vehicle[] =
    [
        {id: null, registration: "1234", manufacturer: "Audi", cpc: "", insurance: "01", license: "", model: "", nct: "", service: "", tax: ""},
    ];
    public items = [
        {
           blah: this.vehicles,
        }
    ]