如何设置默认值离子选择项？

Question

我需要将默认值设置为离子选择项。

上面的离子选择包含地点列表，选择一个地方后，我将其保存到localStorage。

我需要这个localStorage是ion-select的默认值，如下所示：

  

当页面被更改时，离子选择返回placeHolder而没有选择项目

CODE ：

  <ion-item>
    <ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
      <ion-option class="text-input place-field" *ngFor="let place of places | async;let i = index" value="{{place.id}}"> 
        {{place.name}}
      </ion-option>
    </ion-select>
  </ion-item>

Answer 1

如果你有索引值，你可以从localstorage中获取它，当页面加载时你可以将它保存在变量中，然后用它绑定到ion-option上的selected属性：

HTML：

<ion-item>
  <ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
    <ion-option class="text-input place-field" *ngFor="let place of places | async;let i = index" [selected]="i == selectedIndex" value="{{place.id}}"> // the variable selected index will be a number and will select the item matching with the index from the array.
    {{place.name}}
    </ion-option>
  </ion-select>
</ion-item>

在ts：

selectedIndex: number;

constructor(){
  this.selectedIndex = localStorage.getItem('index') // 
}

Answer 2

我解决了

ion-select具有与placeId

的双向数据绑定

<ion-select multiple="false" placeholder="Which Place?" [(ngModel)]="placeId" (ionChange)="showPlace()"> 
  <ion-option class="text-input place-field" *ngFor="let place of places | async;" value="{{place.id}}"> 
    {{place.name}}
  </ion-option>
</ion-select>

选择地点后，我将所选地点的ID保存在本地存储中。然后在ionViewDidLoad()我初始化变量this.placeId

this.placeId = localstorage.getItem('foo')

它运作正常。

  

我的错误：我在本地存储中保存了该地点的名称，而不是该地方的ID

Answer 3

我找到了解决方案.. 将AbstractControl添加到[（ngModel）]。

例如：
在你的TS文件..

placeForm: FormGroup;
placeId: AbstractControl;

constructor(){
  this.placeForm.formBuilder.group({
   placeId: ['', Validators.required],
  });
  this.placeForm.get('placeId').setValue(place.id);
}

你的HTML中的

只需添加此[(ngModel)]="placeForm.placeId"

即可

Answer 4

谢谢

离子4

  ionViewDidEnter() {
    let parametros = this.navParams.get('parametros');
    this.cuentaBancaria.empresa._id = parametros.empresa;
    this.cuentaBancaria.moneda._id = parametros.moneda;
  }