使用动态离子选择选项将值设置为离子选择框答案

【问题标题】：Set value to an ion-select-box with dynamic ion-select-option使用动态离子选择选项将值设置为离子选择框
【发布时间】：2020-11-14 21:23:39
【问题描述】：

我正在尝试学习离子。代码和屏幕截图位于 Google Drive 链接 (https://drive.google.com/drive/folders/1fw6zIjyczHReM2Ddb_jtCO4GAlgFjM7v?usp=sharing)

我点击屏幕 1 中的 (+) 以在屏幕 2 中打开模型。我已经填写了详细信息并点击添加。

单击“添加”按钮时，我正在添加区域并关闭模式，并尝试使用代码将屏幕 3 中的选定区域设置为下面的屏幕 4。 this.form.patchValue({'stateCode': stateCode});

但它不起作用。

当点击屏幕 3 中的添加按钮时，我想要屏幕 5 的输出。

我观察到在 District.page.html 中，如果我使用 ion-select-option 像

<ion-select-option *ngFor="let state of states" [value]="state.stateCode" >{{state.stateName}}</ion-select-option>

我得到像屏幕 4 这样的输出

如果我使用离子选择选项

<ion-select-option  value=""> Select District</ion-select-option> 
 <ion-select-option  value="1"> Andhra Pradesh</ion-select-option>
 <ion-select-option  value="2">Arunachal Pradesh</ion-select-option>

我得到像屏幕 5 这样的输出。

但我想用<ion-select-option *ngFor="let state of states" [value]="state.stateCode" >{{state.stateName}}</ion-select-option> 获得屏幕 5 的输出

请帮我解决问题并学习如果需要任何数据。请告诉我，我会分享。

提前致谢

【问题讨论】：

将您的代码添加到您的问题中。停止使用图像代码。

标签： ionic-framework

【解决方案1】：

我猜你已经在 ion-select 中设置了 ngModel 属性，但你没有提到它。

您应该以某种方式在 state.form.id 之类的变量中定义屏幕 3 中的状态 ID

检查屏幕 3 中的 id 是否与 ngFor 循环中的 id 匹配，并将其设置为 [selected] 属性

<ion-select [ngModel]="state.form.id">
  <ion-select-option *ngFor="let state of states" [selected]="state.form.id = state.id" [value]="state.stateCode" >{{state.stateName}}</ion-select-option> 
</ion-select>

【讨论】：