Уникальные опции выбора ionic3

Question

Я нашел кое-что, что хотел бы реализовать в своем приложении ioni c 3. https://codepen.io/charliepage/pen/eBKrdQ

При выборе параметра в одном из полей выбора выбранный параметр будет отключен в других. Может ли кто-нибудь помочь мне или указать мне правильное направление?

спасибо

Вот мой код.

constructor(public http: Http) {
  this.data = {};
  this.data.select1 = "";
  this.data.select2 = "";
  this.data.select3 = "";
  this.loadSaved();
  this.loadUsers();
}

loadUsers() {
  this.http.get("json url 1").map(res => res.json()).subscribe(users => {
    this.users = users;
  });
}

loadSaved() {
  this.http.get("json url 2").map(res => res.json()).subscribe((data) => {
    this.data.select1 = data.NAME1;
    this.data.select2 = data.NAME2;
    this.data.select3 = data.NAME3;
  });

}


<ion-list>
  <ion-item>
    <ion-label>User 1</ion-label>
    <ion-select [(ngModel)]="data.select1">
      <ion-option *ngFor="let user of users" value="{{user.id}}">{{user.name}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>User 2</ion-label>
    <ion-select [(ngModel)]="data.select2">
      <ion-option *ngFor="let user of users" value="{{user.id}}">{{user.name}}</ion-option>
    </ion-select>
  </ion-item>
  <ion-item>
    <ion-label>User 3</ion-label>
    <ion-select [(ngModel)]="data.select3">
      <ion-option *ngFor="let user of users" value="{{user.id}}">{{user.name}}</ion-option>
    </ion-select>
  </ion-item>
</ion-list>

json 1

[
    {
      "id": "1",
      "name": "user1"
    },
    {
      "id": "2",
      "name": "user2"
    },
    {
      "id": "3",
      "name": "user3"
    }
  ]

json 2

{
    "USER1": "1",
    "USER2": "2",
    "USER3": "3"
}

my ioni c info

Ionic:

   Ionic CLI          : 6.1.0 (C:\Users\Gebruiker\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework    : ionic-angular 3.9.4
   @ionic/app-scripts : 3.2.3

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 7.1.4
   Cordova Plugins   : no whitelisted plugins (10 plugins total)

Utility:

   cordova-res : 0.8.0
   native-run  : 0.2.9

System:

   NodeJS : v11.4.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

Answer 1

Вот рабочий код

  <ion-list>
    <ion-item>
      <ion-label>Pizza</ion-label>
      <ion-select placeholder="Select Pizza" [(ngModel)]="data.select1">
        <ion-select-option value=''>Select</ion-select-option>
        <ion-select-option *ngFor="let user of users" [value]="user.id"
          [disabled]="user.id == data.select2 ||user.id == data.select3">{{user.name}}</ion-select-option>
      </ion-select>
    </ion-item>


    <ion-item>
      <ion-label>Pizza</ion-label>
      <ion-select placeholder="Select Pizza" [(ngModel)]="data.select2">
        <ion-select-option value=''>Select</ion-select-option>
        <ion-select-option *ngFor="let user of users" [value]="user.id"
          [disabled]="user.id == data.select1 ||user.id == data.select3">
          {{user.name}}</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item>
      <ion-label>Pizza</ion-label>
      <ion-select placeholder="Select Pizza" [(ngModel)]="data.select3">
        <ion-select-option value=''>Select</ion-select-option>
        <ion-select-option *ngFor="let user of users" [value]="user.id"
          [disabled]="user.id == data.select1 ||user.id == data.select2">{{user.name}}</ion-select-option>
      </ion-select>
    </ion-item>

  </ion-list>