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

Я использую 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 г.]: Изучив образец в соответствии с рекомендациями Нико и проведя дополнительное тестирование, я обнаружил, что такое поведение проявляется только тогда, когда значения параметров извлекаются из серверной части через службу 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, где будет присутствовать некоторая задержка.

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


nativescript listpicker
person Clarence Ho    schedule 25.11.2016    source источник
comment
Нашел еще немного информации. В ListPicker элементы поступают для вызова API службы Http, который я вызываю http в ngOnInit (), а затем заполняю переменную языков, когда результат возвращается из серверной части. Похоже, что на Android, когда элементы были заполнены позже, ListPicker не обновляется. Пока в iOS этой проблемы не обнаружено.   -  person Clarence Ho    schedule 25.11.2016
comment
Привет, @Clarence! Хорошей отправной точкой является рассмотрение этого образца проекта здесь - github.com/NativeScript / nativescript-sdk-examples-ng, где было показано, как использовать все компоненты NativeScript в проекте NativeScript Angular 2. Именно для вашего случая вы можете просмотреть пример здесь - github.com/NativeScript/nativescript-sdk-examples-ng/tree/.   -  person Nikolay Tsonev    schedule 25.11.2016
comment
Привет, @Nikolay, большое спасибо за ответ. Я протестировал этот пример кода и добавил дополнительную информацию в свой пост для справки. огромное спасибо.   -  person Clarence Ho    schedule 26.11.2016
comment
Привет, @Clarence Ho, вы можете просмотреть пример кода ниже, где было показано, как добавлять элементы ListPicker после получения данных из вашего HTTP-запроса.   -  person Nikolay Tsonev    schedule 28.11.2016

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы иметь возможность добавлять элементы 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];
    }
}
person Nikolay Tsonev    schedule 28.11.2016