Angular 4中*ngFor内对象数组声明及[(ngModel)]绑定失效排查

我来一步步帮你搞定这两个问题，先从基础的对象数组声明说起，再排查ngModel绑定失效的核心原因。

一、在*ngFor中正确使用对象数组 #

要在*ngFor里遍历对象数组，首先得在组件类里正确初始化你的对象数组，确保数组里的每个元素都包含你需要的属性（比如jobQty、date）。

举个组件类的示例，你可以这么定义：

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

@Component({
  selector: 'app-day-jobs',
  templateUrl: './day-jobs.component.html'
})
export class DayJobsComponent {
  // 如果你需要固定天数，也可以直接用model数组的长度来生成Day序号，不用单独定义dayNum
  model = [
    { jobQty: 0, date: '17Jan' },
    { jobQty: 0, date: '18Jan' },
    { jobQty: 0, date: '19Jan' }
  ];
}

这样模板里用*ngFor遍历时，就能稳定获取每个对象的属性了。

二、解决[(ngModel)]绑定失效的问题 #

看你提供的代码，绑定失效大概率是因为model数组未正确初始化——如果model[i]不存在或者model[i].jobQty没预先定义，Angular的双向绑定就会失效。另外你的代码还有个小问题：循环里的id="jobQty"会生成多个重复id的DOM元素，不符合HTML规范，建议改成动态唯一id。

修正后的模板代码 #

<div class="form-group">
  <!-- 直接遍历model数组，同时获取索引生成Day序号 -->
  <div *ngFor="let dayItem of model; let i = index" >
    Day {{i + 1}} 
    <!-- 动态生成唯一id，避免DOM冲突 -->
    <input type="number" [id]="'jobQty-' + i" [(ngModel)]="dayItem.jobQty"> 
    JobQty: {{dayItem.jobQty}} 
    Date: {{dayItem.date}}
  </div>
</div>

关键修复点说明 #

• 直接遍历model数组：比起遍历dayNum再通过model[i]访问，直接遍历model更清晰，还能避免索引超出数组长度的问题；
• 预先初始化model元素：每个model元素必须提前定义jobQty属性，否则Angular无法追踪这个属性的变化；
• 动态设置唯一id：用[id]="'jobQty-' + i"生成不重复的id，符合HTML标准，也能避免潜在的DOM操作冲突；
• 用循环变量替代索引访问：直接用dayItem访问属性，代码更简洁，减少了索引访问可能带来的错误。

按照上面的写法，就能实现你想要的效果：每个Day对应独立的JobQty输入框和日期展示，输入框的值变化会实时同步到model数组中，双向绑定完全正常工作。

内容的提问来源于stack exchange，提问作者Druids Mickey Jo