如何使用ngFor实现至少5次迭代？Angular2输入框渲染需求

别担心，刚上手Angular遇到这种问题太正常了，我来一步步带你搞定：

第一步：在组件类里初始化固定数量的零件对象 #

你的parts数组初始是空的，咱们要在组件加载时往数组里塞5个空的零件对象，这样模板就能遍历生成对应的输入框了。

打开你的组件.ts文件，在ngOnInit生命周期钩子中完成这个操作：

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

@Component({
  selector: 'app-parts-form',
  templateUrl: './parts-form.component.html',
  styleUrls: ['./parts-form.component.css']
})
export class PartsFormComponent implements OnInit {
  parts: any[] = []; // 初始为空数组

  ngOnInit(): void {
    // 循环5次，添加5个空的零件对象
    for (let i = 0; i < 5; i++) {
      this.parts.push({
        name: '', // 零件名称，初始为空
        quantity: '', // 零件数量，初始为空
        // 你可以根据需求加更多属性，比如规格、型号之类的
      });
    }
  }
}

第二步：在模板里遍历数组渲染输入框 #

接下来在组件的.html模板中，用*ngFor指令遍历parts数组，给每个零件对象生成一组输入框，再用双向数据绑定[(ngModel)]把输入内容和组件里的parts数组关联起来——这样用户输入的内容会自动同步到数组里。

<div *ngFor="let part of parts; let i = index">
  <h4>零件 {{i + 1}}</h4>
  <label>零件名称：</label>
  <input type="text" [(ngModel)]="part.name" placeholder="请输入零件名称">
  
  <label>零件数量：</label>
  <input type="number" [(ngModel)]="part.quantity" placeholder="请输入数量">
  
  <!-- 要是需要更多字段，直接在这里加就行 -->
</div>

关键注意事项 #

• 如果你用了[(ngModel)]，一定要在你的模块里导入FormsModule，不然双向绑定会失效：
  在你的module.ts文件里添加这段代码：

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // 其他已有的导入项
      FormsModule
    ]
  })
  export class YourModule { }
  

• 要是你有自定义的零件模型类（比如Part），可以把any[]换成Part[]，push的时候用new Part()创建对象，这样类型更安全。

这样页面加载后就会自动渲染5组输入框，用户填的内容会直接存在parts数组里，之后你就可以用这个数组做提交、校验之类的后续操作啦！

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