Ionic 4: Как предварительно выбрать значения в компоненте ion-select

Question

Я занимаюсь разработкой приложения для Ionic 4. Мне нужно передать данные из списка пользователей в форму, чтобы изменить некоторые атрибуты этого конкретного пользователя.

Я передал данные из списка (пользователя) на другую страницу, содержащую форму. Я сохранил эти данные в локальных переменных в формате .ts формы.

Теперь у меня возникли проблемы с тем, чтобы компонент выбора ионов предварительно выбрал эти данные. У меня нет проблем с ионным вводом.

Я пытался сделать это с двойной привязкой данных с [(NgModel)] и атрибутом значения, но это не сработало.

Любая помощь здесь будет оценена.

Редактировать: Вот мой код.

Файл .ts:

 serviceList: Service[];

 isModifying = false;

 username: string;
 password: string;
 firstName: string;
 lastName: string;
 service: number;
 codivRH: any;
 profil: string;


 constructor(private sqlP: SqlProvider, private route: ActivatedRoute, private router: Router) {

  this.route.queryParams.subscribe(params => {
    if (this.router.getCurrentNavigation().extras.state) {
      this.firstName = this.router.getCurrentNavigation().extras.state.userFirstname;
      this.lastName = this.router.getCurrentNavigation().extras.state.userLastname;
      this.service = this.router.getCurrentNavigation().extras.state.userService;
      this.codivRH = this.router.getCurrentNavigation().extras.state.userCodiv;
      this.profil = this.router.getCurrentNavigation().extras.state.userProfil;
      this.isModifying = true;
    }
  });

}

ВотФайл .html:

<ion-item>
          <ion-label> Service </ion-label>
          <ion-select [(ngModel)]="service" name="service">
            <ion-select-option *ngFor="let mservice of serviceList" value="mservice.Id" ngDefaultControl> {{ mservice.Nom }} </ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label> CodivRH </ion-label>
          <ion-select [(ngModel)]="codivRH" name="codiv">
            <ion-select-option value="1"> Oui </ion-select-option>
            <ion-select-option value="0"> Non </ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label> Profil </ion-label>
          <ion-select [(ngModel)]="profil" name="profil">
            <ion-select-option value="user"> Utilisateur</ion-select-option>
            <ion-select-option value="admin"> Admin </ion-select-option>
            <ion-select-option value="Superadmin"> SuperAdmin </ion-select-option>
          </ion-select>
        </ion-item>

Answer 1

Здесь работает пример

у вас в тс

selected;
  defaultList = [
    {
      id: 0,
      key: "BILLPAYMENT",
      value: "Wallet_1002"
    },
    {
      id: 1,
      key: "REQUESTMONEY",
      value: "Wallet_1002"
    },
    {
      id: 2,
      key: "SENDMONEY",
      value: "Wallet_1002"
    },
    {
      id: 3,
      key: "QUICKPAYMENT",
      value: "Wallet_1002"
    }
  ];

  constructor() {

   this.selected={
      id: 0,
      key: "BILLPAYMENT",
      value: "Wallet_1002"
    };
  }

.html

    <ion-item>
        <ion-select [(ngModel)]="selected" [compareWith]="compareFn">
       <ion-option *ngFor="let default of defaultList" [value]="default">{{default.key}}</ion-option> 
     </ion-select>
    </ion-item>