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

しかし、Androidでは、ListPickerが機能していないことがわかりました。リストを表示しますが、定義されたオプション間をスクロールすることはできません。 ListPicker on Android

次は、環境情報です：

• NativeScriptバージョン：2.4.0
• NativeScript-角度バージョン：1.1.3
• NativeScriptのAndroidランタイムバージョン：以下のスクリーンショットです2.4.1
• Androidのエミュレータ：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]; 
    } 
} 

ハードコードされたとまったく同じ値を持つエンドポイントの意志応答値。 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]; 
    } 
}