Ionic 3 Angular 5中ion-select标签无法设置默认值问题

我来帮你搞定这个ion-select默认值不生效的问题，在Ionic 3搭配Angular 5的项目里，这种情况大多是几个常见原因导致的，咱们一步步排查：

1. 确保组件中正确初始化day变量 #

你用了[(ngModel)]="day"双向绑定，那首先得在组件类里给day赋一个和ion-option的value完全匹配的值——注意大小写要完全一致，比如你的选项值是"Monday"，那初始化的时候就不能写成"monday"。

举个组件代码的例子：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.html',
  styleUrls: ['./your-component.scss']
})
export class YourComponent implements OnInit {
  // 先声明变量
  day: string;

  ngOnInit() {
    // 在这里设置默认值，和ion-option的value严格匹配
    this.day = 'Monday';
  }
}

2. 检查FormsModule是否已正确导入 #

因为你用了ngModel双向绑定，必须在对应的模块（比如当前组件的页面模块或者根模块AppModule）中导入FormsModule，否则绑定会失效，默认值自然不会显示。

模块代码示例：

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'; // 导入FormsModule
import { IonicPageModule } from 'ionic-angular';
import { YourComponent } from './your-component';

@NgModule({
  declarations: [
    YourComponent,
  ],
  imports: [
    IonicPageModule.forChild(YourComponent),
    FormsModule // 一定要添加这个！
  ]
})
export class YourComponentModule {}

3. 检查绑定语法是否有误 #

再核对一下模板里的代码：确保[(ngModel)]="day"的变量名拼写正确，没有大小写错误，比如别写成"Day"或者"days"。

4. 异步数据场景的特殊处理 #

如果day的值是从API请求或者其他异步操作中获取的，要确保在数据返回后再给day赋值。或者可以用*ngIf让ion-select在day有值之后再渲染，避免初始化时变量为空：

<ion-item *ngIf="day">
  <ion-label> Day</ion-label>
  <ion-select interface="popover" [(ngModel)]="day" >
    <ion-option value="Monday">Monday</ion-option>
    <ion-option value="Tuesday">Tuesday</ion-option>
    <ion-option value="Wednesday">Wednesday</ion-option>
    <ion-option value="Thursday">Thursday</ion-option>
    <ion-option value="Friday">Friday</ion-option>
    <ion-option value="Saturday">Saturday</ion-option>
  </ion-select>
</ion-item>

先从前面两点开始排查，这是最常见的问题，一般就能解决啦！

内容的提问来源于stack exchange，提问作者Eyris