Ionic 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>

Answer 2

我在使用 ReactiveForms 时遇到了同样的问题。这是我的表单：update.html

 <form *ngIf="datosBasicosForm" name="datosBasicosForm" [formGroup]="datosBasicosForm">
    <ion-list>
        <ion-item>
            <ion-label position="floating">Tipo de Actividad </ion-label>
            <ion-select id="field_tipoDeActividad" placeholder="Seleccionar"   formControlName="tipoDeActividad"
            [compareWith]="compareTipoDeActividad"  >
                <ion-select-option  [value]="tipoDeActividadOption" 
                    *ngFor="let tipoDeActividadOption of tipoDeActividads; trackBy: trackTipoDeActividadById">
                    {{tipoDeActividadOption.nombre}}</ion-select-option>
            </ion-select>
        </ion-item></ion-list></form>

然后在update.ts 中加载一些数据来填充TipoDeActividad 的tipoDeActividads 数组和来自数据库的Actividad 变量actividad，其中id 作为参数传递：

export class ActividadUpdatePage implements OnInit {

    datosBasicosForm = this.formBuilder.group({
                             id: [],
                             tipoDeActividad: [null, [Validators.required]],
                        });

    async ngOnInit() {

          this.tipoDeActividadService.query()
                .subscribe(data => { this.tipoDeActividads = data.body; }, (error) => 
                  this.onError(error));

          this.activatedRoute.data.subscribe((response) => {
              this.updateForm(response.data);
           });

      }

     updateForm(actividad: Actividad) {
          this.datosBasicosForm.patchValue({
              id: actividad.id,
              tipoDeActividad: actividad.tipoDeActividad, 
      });
}

如您所见，我在 ngOnInit 中加载所有内容，并对表单中收到的值进行修补。

但即使我点击离子选择并选择了该选项，问题是它在表单加载时不显示预选值...

compareWith函数如下：

 compareTipoDeActividad(first: TipoDeActividad, second: TipoDeActividad): boolean {

    return first && second ? first.id === second.id : first === second;

}

所以我认为这可能与我正在处理的对象类型有关？还是在呈现表单时未准备好的异步加载调用？

任何帮助将不胜感激，谢谢。