IONIC。选择数组内的项目

Question

我想创建2个ion-item列表，如下所示：

<ion-list>
  <ion-item>
    <ion-label>Gaming</ion-label>
    <ion-select [(ngModel)]="gaming">
      <ion-option value="nes">NES</ion-option>
      <ion-option value="n64">Nintendo64</ion-option>
      <ion-option value="ps">PlayStation</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

但我的问题是，是否有可能我希望ion-option在数组列表中，以便第二个项目列表只显示未从第一个选择的ion-option。

例如：第一个列表NES在此处被选中，因此第二个列表将仅显示Nintendo64和PlayStation

Answer 1

这是一种肮脏的方式但它的工作原理。

1. 在.ts文件中声明数组和对象变量。

码：

gamingList1 = [{ "value":"nes", "label":"NES" },{ "value":"n64", "label":"Nintendo64" },{ "value":"ps", "label":"PlayStation" }];
gamingList2:any = [];
gaming = { firstGaming:"", secondGaming:"" }

2. 创建一个函数来填充第二个数组。

码：

populateSelect(value) {
  this.gamingList2 = [];
  for (let gl of this.gamingList1) {
    if(value !== gl.value) {
      this.gamingList2.push({"value":gl.value, "label":gl.label});
    }
  }
  this.gaming.secondGaming = this.gamingList2[0].value;
}

3. 将其加载到构造函数中以获取初始ion-select数据。

码：

constructor(public navCtrl: NavController) {
  this.gaming.firstGaming = this.gamingList1[0].value;
  this.populateSelect(this.gaming.firstGaming);
}

4. 以HTML格式显示。

<ion-list>
    <ion-item>
      <ion-label>Gaming</ion-label>
      <ion-select [(ngModel)]="gaming.firstGaming" (ngModelChange)="populateSelect(gaming.firstGaming)">
        <ion-option [value]="gl.value" *ngFor="let gl of gamingList1">{{gl.label}}</ion-option>
      </ion-select>
    </ion-item>
    <ion-item>
      <ion-label>Gaming</ion-label>
      <ion-select [(ngModel)]="gaming.secondGaming">
        <ion-option [value]="gl.value" *ngFor="let gl of gamingList2">{{gl.label}}</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>