How to asign async observable items to Listpicker (angular)

[Florian]

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!

[Nikolay Tsonev]

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 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

[Florian]

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