Angular 8中如何用ngModel绑定数组及处理不确定数量输入框？

嘿，我来帮你搞定这两个Angular里的ngModel绑定问题～

问题1：如何在ngModel中绑定数组？ #

首先得明确：[(ngModel)]是用来绑定单个值的，直接把它绑到整个数组上肯定行不通——所有输入框会共享同一个数组引用，根本没法单独存储每个输入的内容。

正确的思路是：把每个输入框绑定到数组的具体元素索引上，或者用*ngFor循环生成输入框，让每个输入框自动对应数组的一个元素。

问题2：获取不确定数量输入框的值到contato.prod数组 #

针对你的场景，我分两种情况给你解决方案：

情况1：输入框数量固定（比如当前的3个） #

直接给每个输入框绑定到contato.prod的对应索引即可，但要记得先在TS里初始化数组的对应元素，避免出现undefined的问题：

TS代码：

contato = { 
  nome: '', 
  tipo: '', 
  fone: '', 
  celular: '', 
  email: '', 
  skype: '', 
  prod: ['', '', ''] // 初始化3个空字符串，对应3个输入框
};

HTML代码：

<input [(ngModel)]="contato.prod[0]" type="text" class="form-control">
<input [(ngModel)]="contato.prod[1]" type="text" class="form-control">
<input [(ngModel)]="contato.prod[2]" type="text" class="form-control">

情况2：输入框数量动态增减（不确定数量） #

如果后续可能需要添加/删除输入框，用*ngFor循环生成输入框是更灵活的方案：

TS代码：

contato = { 
  nome: '', 
  tipo: '', 
  fone: '', 
  celular: '', 
  email: '', 
  skype: '', 
  prod: ['', '', ''] // 初始3个输入框，可根据需求调整
};

// 添加新的输入框
addProdInput() {
  this.contato.prod.push('');
}

// 删除指定索引的输入框
removeProdInput(index: number) {
  this.contato.prod.splice(index, 1);
}

HTML代码：

<!-- 循环生成输入框 -->
<div *ngFor="let item of contato.prod; let i = index" class="mb-3">
  <input [(ngModel)]="contato.prod[i]" type="text" class="form-control">
  <button (click)="removeProdInput(i)" class="btn btn-sm btn-danger mt-1">删除</button>
</div>

<!-- 添加输入框按钮 -->
<button (click)="addProdInput()" class="btn btn-primary">添加输入框</button>

重要注意事项 #

别忘了在你的Angular模块（比如app.module.ts）里导入FormsModule，否则ngModel会失效：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他导入的模块（比如BrowserModule）
    FormsModule
  ]
})
export class AppModule { }

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