NativeScript Angular2 - ListPicker가 Android에서 작동하지 않습니다.

Question

NativeScript Angular2를 사용하고 있으며 내 페이지에서 사용자가 옵션을 선택하기 위해 ListPicker를 추가했습니다.

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

다음은 CSS입니다 : 다음은 HTML 파일에 대한 코드입니다

.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 안드로이드 런타임 버전 : 2.4.1
• 안드로이드 에뮬레이터 : API 25 넥서스 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]; 
    } 
} 

을 어디에 하드와 동일한 값으로 엔드 포인트 의지 응답 값. 안드로이드 (에뮬레이터와 장치 모두)에서 위의 코드를 실행하면 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]; 
    } 
}