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

然而，在Android上，发现ListPicker无法正常工作。它显示列表，但不能在定义的选项之间滚动。以下是截图： ListPicker on Android

以下是环境信息：

NativeScript版本：2.4.0
NativeScript-Angular版本：1.1.3
NativeScript Android Runtime版本：2.4.1
Android模拟器：API 25 Nexus 6

我是NativeScript的新手，不确定它是否与我的环境有关。

欢迎任何建议。提前致谢

[2016年11月26日更新]：通过探索Niko建议的样本和更多测试，我发现仅当通过Http服务从后端获取选项值时才会出现该行为。例如，在示例的creation-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

为了能够在 HTTP 请求之后添加 ListPicker 项目，您应该在接收数据后创建新数组并使旧数组指向新数组。您可以查看下面附带的样本。

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

NativeScript Angular2 - ListPicker不适用于Android

1 个答案: