离子4：如何在离子选择组分中预先选择值

Question

我正在开发Ionic 4应用程序。我需要将用户列表中的数据传递给表单，以便修改此特定用户的某些属性。

我将数据从列表（用户）传递到包含表单的另一页。我将此数据保存在表单.ts中的局部变量中。

现在，在使离子选择组件预先选择此数据时遇到一些麻烦。我对离子输入没有任何麻烦。

[我试图通过使用[（NgModel）]和value属性进行双重数据绑定来做到这一点，但这没有用。

这里的任何帮助将不胜感激。

编辑：这是我的代码。

。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

这里正在工作example

在您的ts中

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>