如何预先选择离子选择的值并存储选择的值答案

【问题标题】：How to pre-select value of ion-select AND store the selected value如何预先选择离子选择的值并存储选择的值
【发布时间】：2020-07-18 18:34:07
【问题描述】：

这是我的 HTML 文件

        <ion-item>
          <ion-label position="floating">Main Store Name</ion-label>
          <ion-select [(ngModel)] = "SelectedMainStore" 
        [ngModelOptions]="{standalone: true}" 
        value="{{SelectedMainStore}}" [compareWith] = "compareWith" >

            <ion-select-option *ngFor="let mainStore of MainStoreArray" 
        value="{{mainStore.mainStoreId}}">
              {{mainStore.mainStoreName}}</ion-select-option>

          </ion-select>
        </ion-item>

我可以通过使用“[compareWith]”和“value = '{{SelectedMainStore}}'”来预先选择 Select 的值。然后我的计划是利用 [(ngModel)] 来保存选择的任何选项。但是当我添加 [(ngModel)] 时，离子选择不再出现 {{mainStore.mainStoreName}}。

这就是 [compareWith] 的样子：

compareWithFn(o1, o2) {
  return o1 === o2;
};

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

如果您提供如下值，则在 ion-select-option 中

value="{{mainStore.mainStoreId}}"

那么这个值将被视为字符串，并且 SelectedMainStore 的默认值是数字，这就是为什么它不能按预期工作的原因。

请将用户值设置为如下角标签。

[value]="mainStore.mainStoreId"

现在它可以工作了。下面给出了 ion-select 的完整 html 代码。

      <ion-select [(ngModel)]="SelectedMainStore" [ngModelOptions]="{standalone: true}">

        <ion-select-option *ngFor="let mainStore of MainStoreArray" [value]="mainStore.mainStoreId">
          {{mainStore.mainStoreName}}</ion-select-option>

      </ion-select>

【讨论】：