Ionic中*ngFor循环表单首行默认值未生效问题

嘿，这个问题我之前也踩过坑！核心原因是你同时用了[(ngModel)]和value属性，Angular的ngModel指令会优先接管输入框的值，直接忽略你写的value="0"。如果你的userList里第一个user的hours属性初始是undefined或者null，那首行输入框就会显示为空，而后面的行可能因为对应的user.hours有默认值（或者渲染时的绑定逻辑巧合）才正常显示0，咱们来彻底解决它。

方案1：从数据源初始化默认值（推荐） #

最稳妥的方式是在组件里给userList的每个用户对象提前设置hours的默认值0，这样ngModel绑定的时候直接拿到的就是0，输入框自然会显示正确的值：

// 组件.ts文件中，获取到userList之后处理
this.userList = userList.map(user => ({
  ...user,
  hours: user.hours ?? 0 // 若原hours为null/undefined，就设为0
}));

然后模板里去掉多余的value="0"，保持绑定即可：

<form #hoursForm="ngForm" (ngSubmit)="save()">
  <ion-grid>
    <ion-row *ngFor="let user of userList">
      <ion-col>
        <ion-input 
          name="hours" 
          type="number" 
          #userHours="ngModel" 
          [(ngModel)]="user.hours" 
          required>
        </ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>

方案2：在模板里处理默认值（适合不想修改数据源的情况） #

如果不想改动组件里的数据源，可以在模板里用空值合并操作符??设置默认显示值，同时手动处理双向绑定的更新：

<form #hoursForm="ngForm" (ngSubmit)="save()">
  <ion-grid>
    <ion-row *ngFor="let user of userList">
      <ion-col>
        <ion-input 
          name="hours" 
          type="number" 
          #userHours="ngModel" 
          [ngModel]="user.hours ?? 0"
          (ngModelChange)="user.hours = $event"
          required>
        </ion-input>
      </ion-col>
    </ion-row>
  </ion-grid>
</form>

这里[ngModel]="user.hours ?? 0"确保当user.hours为空时显示0，(ngModelChange)="user.hours = $event"则把用户输入的值同步回user.hours属性，实现双向绑定的效果。

为什么原来的value="0"没用？ #

Angular的ngModel指令会完全控制输入框的value属性，当你使用[(ngModel)]时，输入框的显示值由绑定的user.hours决定，你手动写的value="0"会被Angular直接忽略，所以首行才会是空——因为第一个user的hours初始值是空的。

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