Ionic中如何动态创建带ngModel属性的ion-input元素并绑定值到数组

你原来的实现方式存在本质问题：Angular 的 [(ngModel)] 双向绑定是基于模板编译实现的，你用原生 document.createElement 手动创建的 DOM 元素没有经过 Angular 的编译流程，仅给 DOM 元素加 ngModel 属性不会触发双向绑定逻辑，因此动态生成的输入框无法绑定成功。

正确实现方案（无需手动操作DOM） #

核心思路是用 Angular 的 *ngFor 指令，基于数组动态渲染输入框，完全避免手动创建DOM。

1. 修改组件类逻辑 #

首先调整serialNumbers为字符串数组，修改newElement方法仅操作数组即可：

// 组件类中首先定义数组，初始空字符串对应默认的第一个输入框
serialNumbers: string[] = [''];

newElement() {
  // 直接往数组新增空项，Angular会自动渲染新的输入框
  this.serialNumbers.push('');
}

2. 修改页面模板代码 #

删除原来写死的单个输入框，改用*ngFor遍历数组渲染输入框：

<!-- 遍历serialNumbers数组，索引为i -->
<ion-item *ngFor="let serial of serialNumbers; let i = index">
  <ion-input
    type="text"
    expand="block"
    placeholder="شماره سریال"
    required
    <!-- name属性要唯一，用索引区分避免表单冲突 -->
    name="serial-{{i}}"
    <!-- 绑定数组对应下标的值 -->
    [(ngModel)]="serialNumbers[i]"
  ></ion-input>
</ion-item>

<!-- 你的+按钮绑定newElement方法即可 -->
<ion-button (click)="newElement()">+</ion-button>

实现效果 #

• 页面首次加载会自动渲染1个默认输入框，对应serialNumbers[0]
• 每次点击+按钮，数组新增一项，*ngFor自动渲染新的输入框
• 所有输入框的值会自动双向绑定到serialNumbers数组对应位置，直接取这个数组就能拿到所有序列号
• 如果后续需要支持删除输入框，仅需调用this.serialNumbers.splice(index, 1)删除数组对应下标的项，页面会自动同步删除对应输入框

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