JSONでの条件付きリスト

Question

"id"が選択されたことに基づいて "データ"のドロップダウンリストを作成しようとしています。私は、httpリクエストからのJSON応答からデータを取得します。形式は次のとおりです。

[ 
{ "id": 1, "data":[1,2,3,4] }, 

    { "id": 2, "data":[5,6,7] } 
] 

HTMLは次のとおりです。

<ion-item> 
    <ion-label>Ciudad</ion-label> 
    <ion-select > 
     <ion-option *ngFor="let undato of datosRecibidos">{{undato.nombre}}</ion-option> 
    </ion-select> 
    </ion-item> 

    <ion-item> 
    <ion-label>Fracción</ion-label> 
    <ion-select> 
     <ion-option [?????] </ion-option> 
    </ion-select> 
    </ion-item> 

.TS：

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [ServicioPost] 
}) 
export class HomePage { 
    datosRecibidos: Datos[]; 
    constructor(public navCtrl: NavController, private unservicio: ServicioPost) { 
    this.unservicio.getdatos('mc').subscribe(datos_recibidos => 
    this.datosRecibidos=datos_recibidos); 
    } 
} 
interface Datos { 
    id: string; 
    data: string[]; 
} 

だから私は、以前のidの選択に基づいて、ドロップダウンリストを作りたいです選択。どのように私はこれを設定できますか？私は* ngForでそれをやろうとしていますが、それをどうやって実現するのか分かりません。私はAngular2とTypeScriptが初めてです。

ありがとうございます！

Answer 1

.TSでHTML

<ion-item> 
    <ion-label>Ciudad</ion-label> 
    <ion-select (change) = "selectId($event)"> 
     <ion-option *ngFor="let undato of datosRecibidos" [value] = "undato.id">{{undato.id}}</ion-option> 
    </ion-select> 
    </ion-item> 

    <ion-item> 
    <ion-label>Fracción</ion-label> 
    <ion-select> 
     <ion-option *ngFor="let item of selectItems ">{{item}} </ion-option> 
    </ion-select> 
    </ion-item> 

でこの

は、おかげで@vikash

export class HomePage { 
     datosRecibidos: Datos[]; 

     selectItems:any = []; 
     constructor(public navCtrl: NavController, private unservicio: ServicioPost) { 
      this.unservicio.getdatos('mc').subscribe((datos_recibidos) => { 
      this.datosRecibidos=datos_recibidos; 
      this.selectItems = datos_recibidos[0]['data']; 
     )}; 
     } 


     selectId(event:any){ 
      let selectedId = event.target.value; 
      for(let i = 0 ; i < this.datosRecibidos.length ; i++){ 
       if(selectedId === this.datosRecibidos[i]['id']){ 
        this.selectItems = this.datosRecibidos[i]['data']; 
       } 
      } 

     } 

    } 
    interface Datos { 
     id: string; 
     data: string[]; 
    } 

Answer 2

ファイルのように、あなたが行うことができます。実際には、コードには2つのマイナーな変更が必要でした。 1）ionicのイベントはそのコンポーネントのionChangeです。 2番目は、長さ-1の中の反復です。以下のコードは動作します。おかげ.TSであなたの貢献のための

<ion-select (ionChange) = "selectId($event)"> 

：それが動作するかどうか

for (let i=0; i<=this.datosRecibidos.length-1; i++){