如何从离子选择器中获取项目的所有信息?

时间:2018-09-30 23:27:36

标签: firebase ionic-framework google-cloud-firestore ion ion-select

我从消防站加载了一系列物品并将其放入离子选择器中,问题在于,由于每个物品都有一个ID,因此我需要获取选择的ID。

这是我在控制器中获取物品的代码。

this.MesasColeccion = this.mesasser.getMesaListfromFirestore();
this.MesasColeccion.snapshotChanges().subscribe(mesasLista => {
  this.mesas  = mesasLista.map(mesa => {
    return {
      nombre: mesa.payload.doc.data().nombre,
      capacidad: mesa.payload.doc.data().capacidad,
      estado: mesa.payload.doc.data().estado,
      union:mesa.payload.doc.data().union,
      id: mesa.payload.doc.id
    }
  });

  this.mesas2  = mesasLista.map(mesa2 => {
    return {
      nombre: mesa2.payload.doc.data().nombre,
      capacidad: mesa2.payload.doc.data().capacidad,
      estado: mesa2.payload.doc.data().estado,
      union:mesa2.payload.doc.data().union,
      id: mesa2.payload.doc.id
    }
  });
});
this.MesasObservable = this.MesasColeccion.valueChanges();

这是在离子选择中显示列表的代码:

<ion-card>
<ion-card-content>
  <ion-item id="mesas-select1">
  <ion-label >
    Mesa #1:
  </ion-label>
  <ion-select  [(ngModel)]='Gruposobj.nombrem1' name="Mesa#1" placeholder="Selecciona la mesa"  >
    <ion-option   *ngFor="let mesa of mesas">
      {{mesa.nombre}}
    </ion-option>
  </ion-select>
  </ion-item>

  <ion-item id="mesas-select1">
    <ion-label >
      Mesa #2:
    </ion-label>
    <ion-select [(ngModel)]='Grupos2obj.nombrem2' name="Mesa#2" placeholder="Selecciona la mesa" >
      <ion-option *ngFor="let mesa2 of mesas2" >
        {{mesa2.nombre}}
      </ion-option>
    </ion-select>
    </ion-item>

ngmodel将选择的选项分配给GruposModel中的属性。在这种情况下,vinculacionmodel的对象是Gruposobj和Grupos2obj。当用户选择离子选择的项目时,我需要从一个项目中获得ID选择。因为我将把这个mesa.id && mesa2.id分配给vinculacionmodel并使用Gruposobj.mesa1 && Gruposobj.mesa2。

这是vinculacion模型:

export interface vinculacionmodel {

    id?:string;
    mesa1:string;
    mesa2:string;
    mesa3:string;
    nombrem1:string;
    nombrem2:string;
    nombrem3:string;
}

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

当您要从对象获取ID时,您可以在MakeHeaderComp.prototype.init = function (params) { this.eGui = document.createElement('div'); this.eGui.innerHTML = '=> {{params.displayName}}'; // create and compile AngularJS scope for this component this.$scope = $scope.$new(); $compile(this.eGui)(this.$scope); this.$scope.params = params; // in case we are running outside of angular (ie in an ag-grid started VM turn) // we call $apply. we put in timeout in case we are inside apply already. setTimeout(this.$scope.$apply.bind(this.$scope), 0); }; 上实现ionChange事件,并将获得选定的对象。

请参考以下代码以获取更多详细信息。

ion-select
.ts文件中的

ionChange事件:

<ion-select [(ngModel)]='Grupos2obj.nombrem2' name="Mesa#2" placeholder="Selecciona la mesa" (ionChange)="onSelectChange($event)">
<ion-option *ngFor="let mesa2 of mesas2" [value]="mesa2['id']">
    {{mesa2.nombre}}
</ion-option>
</ion-select>

希望这将帮助您从onSelectChange(selectedValue: any) { //Selected Value Id will get as param ==> selectedValue //Selected Object var item = this.mesas2.find(item => item['id'] === selectedValue); //Position of object in array var postion = this.mesas2.findIndex(item => item['id'] === selectedValue); } 获取ID。