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

Question

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

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

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

当页面被更改时，离子选择返回placeHolder并且没有选择任何项目

码：

  <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')

它工作正常。

我的错误：我在localstorage中保存了该地点的名称，而不是该地方的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"