我正在使用NativeScript Angular2并在我的页面上添加了ListPicker供用户选择一个选项。下面是HTML文件中的代码片段:NativeScript Angular2 - ListPicker无法在Android上工作
<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 - 角版本:1.1.3
- NativeScript Android的运行版本: 2.4.1
- Android模拟器:API 25 Nexus 6
我是NativeScript的新手,不确定它是否与我的环境相关。
任何意见将非常受欢迎。 在此先感谢
[更新日期2016年11月26日]: 通过探索作为建议由妮可和更多的测试样品,我发现,当选项的值是从后端获取通过HTTP服务的行为才会出现。例如,在本例中的创造,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后端时会存在一些问题,其中会出现一些延迟。
请咨询 克拉伦斯
发现了一些更多的信息。在ListPicker中,“items”用于Http服务API调用,我在ngOnInit()中调用http,然后在从后端返回结果时填充“languages”变量。它看起来像在Android上,当项目被填充后,ListPicker不会更新。在iOS中,这个问题没有找到。 –
Hi @Clarence,好的起点是在这里查看这个示例项目 - https://github.com/NativeScript/nativescript-sdk-examples-ng,其中已经显示,如何在NativeScript Angular 2项目中使用所有NativeScript组件。完全适合您的情况,您可以在这里查看示例 - https://github.com/NativeScript/nativescript-sdk-examples-ng/tree/master/app/ui-category/listpicker/creating-listpicker。 –
Hi @Nikolay,非常感谢您的回复。我已经在示例代码中进行了测试,并在我的帖子中添加了更多信息供您参考。非常感谢。 –