NativeScript Angular2 - ListPicker not working on Android

Question

I am using NativeScript Angular2 and on my page, I have added a ListPicker for user to select an option. The following is the code snippet for the html file:

<ListPicker #languagePicker id="languagePicker" [visibility]="langSelectStatus()" [items]="languages" class="mek-select-field" (selectedIndexChange)="selectedIndexChanged(languagePicker)"
>
</ListPicker>

The following is the css:

.mek-select-field {
  height: 70px;
  border-color: lightblue;
  border-width: 1px;
  margin: 0;
}

I found the code runs without any issues on iOS, the following is the screenshot: ListPicker on iOS

However, on Android, found that the ListPicker was not working. It display the list, but cannot scroll between the options defined. The following is the screenshot: ListPicker on Android

The following is the environment info:

• NativeScript version: 2.4.0
• NativeScript-Angular version: 1.1.3
• NativeScript Android Runtime version: 2.4.1
• Android emulator: API 25 Nexus 6

I am new to NativeScript and not sure if it's related to my environment or not.

Any advice will be much welcome. Thanks in advance

[Updated on 2016 Nov 26]: By exploring the sample as advised by Niko and more testing, I found that the behavior only appears when the option values are fetch from a backend via Http service. For example, in the example's creating-listpicker.component.ts class, if I change the option list to retrieve from Http backend like below code:

export class CreatingListPickerComponent {

    public pokemons: Array<string>;
    public picked: string;

    constructor(private http: Http) {
        this.pokemons = [];

        this.http.get('http://192.168.31.120:3000/pokemons').subscribe(
            res => {
                let list = res.json();
                console.log(`Pokemon list: ${list}`);
                for (var i = 0; i < list.length; i++) {
                    this.pokemons.push(pokemonList[i]);
                }           
            }
        );

/*        for (var i = 0; i < pokemonList.length; i++) {
            this.pokemons.push(pokemonList[i]);
        }*/
    }

    public selectedIndexChanged(picker) {
        console.log('picker selection: ' + picker.selectedIndex);
        this.picked = this.pokemons[picker.selectedIndex];
    }
}

Where the endpoint will response with the exact same value as the hardcoded value. When I run the above code in Android (both emulator and device), I found that the ListPicker will not able to show any options (or only the first) option from time to time. It's very easy to re-produce. iOS don't have this problem.

I believe there exist some issues when the options for ListPicker is coming from a Http backend, where some delay will be present.

Kindly advice Clarence

Answer 1

To be able to add ListPicker items after your HTTP request you should create new array after receiving the data and to make the old array to point to the new one. You could review the below-attached sample.

HTML

<FlexboxLayout flexDirection="column" exampleTitle toggleNavButton>
        <Label class="h3 p-15 text-left" text="Pick a pokemon" textWrap="true"></Label>
        <!-- >> creating-listpicker-html -->
        <ListPicker #picker id="pickerid" class="p-15" 
                        [items]="pokemons" 
                        [selectedIndex]="selectedIndex" 
                        (selectedIndexChange)="selectedIndexChanged(picker)">
        </ListPicker>
        <!-- << creating-listpicker-html -->
        <Label [text]="'Selected pokemon: ' + picked" class="p-15" textWrap="true"></Label>
</FlexboxLayout>

TypeScript

import { Component , NgZone}  from "@angular/core";
import { getFile, getImage, getJSON, getString, request } from "http";

var pokemonList = ["Bulbasaur", "Parasect", "Venonat", "Venomoth", "Diglett",
"Dugtrio", "Meowth", "Persian", "Psyduck", "Arcanine", "Poliwrath", "Machoke"];

@Component({
    selector: "creating-listpicker",
    templateUrl: "ui-category/listpicker/creating-listpicker/creating-listpicker.component.html"
})
export class CreatingListPickerComponent {

    public pokemons: Array<string>;
    public picked: string;

    constructor(private zone:NgZone) {
        this.pokemons = [];
    }
    ngOnInit(){
        var that =this;
        getJSON("https://httpbin.org/get?item1=item1&item2=item2&item3=item3")
            .then((r) => {
                    console.log((<any>r).args.item1);
                    let args = (<any>r).args;
                    var arr = [args.item1, args.item2, args.item3]
                    this.pokemons = arr;
            }, (e) => {
                alert("GetJSON: " + e)
            });
    }

    public selectedIndexChanged(picker) {
        console.log('picker selection: ' + picker.selectedIndex);
        this.picked = this.pokemons[picker.selectedIndex];
    }
}