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

你可以这样做

in 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>

<。>在.ts文件中

    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

谢谢@vikash。实际上你的代码需要两个小的修改。 1）离子中的事件是该组分的ionChange。第二个是长度为1的迭代。以下代码有效。谢谢你的贡献

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

in .ts：

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

带有JSON的条件列表

2 个答案: