帶JSON的條件列表

我試圖根據選擇的「id」做出「數據」的下拉列表。我從http請求獲取JSON響應中的數據。格式爲：帶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的新手。

謝謝！

來源

2016-12-29 Castor

你可以做的.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>

文件

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

來源

2016-12-30 01:32:56

哎告訴我，如果它的工作原理 –

感謝@vikash。其實你的代碼需要兩個小修改。 1）離子事件是ionChange的那個組件。第二個是長度爲1的迭代。下面的代碼工作。感謝您的貢獻

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

在.TS

：

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

來源

2016-12-30 16:56:46 Castor

帶JSON的條件列表

回答

相關問題