How to asign async observable items to Listpicker (angular)

Thread is closed for posting
3 posts, 1 answers
  1. Florian
    Florian avatar
    2 posts
    Member since:
    Feb 2017

    Posted 22 Feb 2017 Link to this post

    Hi,

    I tried to make a Listpicker with async values from an observable array. 

    <ListPicker #picker  [items]="accountInfos$ | async">
    </ListPicker>

    But the Listpicker only works when I set the Array if its completet like: 
    observer.next(["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett"]);

    Using it with a firebase query, where I'm getting multiple single values, which I add each time to the accountInfos$ Array and after adding it to the Array emiting the whole array again with:
    observer.next(accountInfos$);
    only the first first Array Item is displayed.

    Isn't it possible to asign the item asynchron to the Listpicker. With ListView it works fine.

    Thank you for your help!

    Best regards!

  2. Answer
    Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 23 Feb 2017 Link to this post

    Hi,
    Thank you for your interest in NativeScript.

    I reviewed your case and using async pipe with ListPicker seems to work as expected in NativeScript Angular 2 project. 

    The important part for this case is to create a new array from the existing one before adding the changes with observable.next(<array>) method. For your convenience I am attaching sample code:

    HTML

    <StackLayout sdkExampleTitle sdkToggleNavButton>
        <GridLayout>
            <ListPicker [items]="myItems | async" ></ListPicker>
        </GridLayout>
    </StackLayout>

    TypeScript
    import { Component, ChangeDetectionStrategy } from "@angular/core";
    import { Observable as RxObservable } from "rxjs/Observable";
     
    export class DataItem {
        constructor(public id: number, public name: string) { }
    }
     
    @Component({
        moduleId: module.id,
        styleUrls: ["./using-async-pipe.component.css"],
        templateUrl: "./using-async-pipe.component.html",
        changeDetection: ChangeDetectionStrategy.OnPush,
    })
    export class UsingAsyncPipeComponent {
        public myItems: RxObservable<Array<string>>;
     
        constructor() {
            let items = [];
            for (let i = 0; i < 3; i++) {
                items.push("data item " + i);
            }
     
            let subscr;
            this.myItems = RxObservable.create(subscriber => {
                subscr = subscriber;
                subscriber.next(items);
                return function () {
                    console.log("Unsubscribe called!");
                };
            });
     
            let counter = 2;
            let intervalId = setInterval(() => {
                counter++;
                items.push("data item " + (counter + 1));
                subscr.next([...items]);
            }, 1000);
     
            setTimeout(() => {
                clearInterval(intervalId);
            }, 15000);
        }
    }

    The important part in the attached code is [...items], which will create a new array from the existing one, including the newly added items. 

    Let me know, whether this helps or if I could assist you further.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Florian
    Florian avatar
    2 posts
    Member since:
    Feb 2017

    Posted 23 Feb 2017 Link to this post

    Perfect, thank you!!!
    [...items] was the reason.
    Regards
Back to Top