NativeScript Angular2 - ListPicker не работает на Android

Question

Я использую NativeScript Angular2 и на своей странице я добавил ListPicker, чтобы пользователь мог выбрать опцию. Ниже приведен фрагмент кода для файла HTML:

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

Ниже приводится CSS:

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

Я обнаружил, что код работает без проблем на iOS, вот скриншот: ListPicker на iOS

Однако на Android обнаружил, что ListPicker не работает. Он отображает список, но не может прокручивать определенные параметры. Вот скриншот: ListPicker на Android

Ниже приведена информация об окружающей среде:

• Версия NativeScript: 2.4.0
• NativeScript-Angular версия: 1.1.3
• NativeScript Android Runtime версия: 2.4.1
• Эмулятор Android: API 25 Nexus 6

Я новичок в NativeScript и не уверен, связано ли это с моей средой или нет.

Любой совет будет приветствоваться. заранее спасибо

[Обновлено 26 ноября 2016 г.]. Изучив образец в соответствии с рекомендациями Niko и проведя дополнительные тесты, я обнаружил, что такое поведение появляется только тогда, когда значения параметров выбираются из бэкэнда через службу Http. Например, в классе create-listpicker.component.ts, если я изменю список параметров для извлечения из Http-сервера, как показано ниже:

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];
    }
}

Где конечная точка будет отвечать тем же значением, что и жестко заданное значение. Когда я запустил вышеуказанный код в Android (как эмуляторе, так и на устройстве), я обнаружил, что ListPicker не может время от времени отображать какие-либо параметры (или только первый). Это очень легко воспроизвести. iOS не имеет этой проблемы.

Я полагаю, что существуют некоторые проблемы, когда параметры ListPicker поступают из Http-сервера, где будет присутствовать некоторая задержка.

Добрый совет кларенс

Answer 1

Чтобы иметь возможность добавлять элементы ListPicker после вашего HTTP- запроса, вы должны создать новый массив после получения данных и сделать старый массив указателем на новый. Вы можете просмотреть нижеприведенный образец.

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>

Машинопись

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];
    }
}