离子 4:如何在离子选择组件中预先选择值

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

这是工作示例

在你的 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时遇到了同样的问题。这是我的表格：更新.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中，我加载了一些数据来填充 detipoDeActividads数组的TipoDeActividad和来自数据库的 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中加载了所有内容，并对表单中收到的值进行了修补。

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

比较函数如下：

compareTipoDeActividad(first: TipoDeActividad, second: TipoDeActividad): boolean {
return first && second ? first.id === second.id : first === second;
}

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

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