Ionic开发：如何将循环渲染的表单输入值以数组格式传入TypeScript文件

问题核心 #

你当前的写法所有动态生成的表单项都绑定了同一个全局变量，导致最后只能拿到最后一组输入的值，改成绑定到循环遍历的单个product对象上即可解决，具体实现如下：

步骤1：调整question.page.ts逻辑 #

在获取products列表后，给每个product初始化表单需要的字段，避免双向绑定出现异常：

// 定义最终要输出的结果数组
productQuestions: Array<{productId: string, question: string, contactBack: string}> = [];
products: any[] = []; // 你原有逻辑里的商品数组

// 假设你是在接口请求拿到products列表后做初始化
getProducts() {
  // 这里保留你原来获取products的逻辑
  this.products = 接口返回的商品数据;
  // 新增：给每个product初始化表单字段
  this.products.forEach(item => {
    item.question = '';
    item.contactBack = '0'; // 默认选中No
    // productId直接用已有的item.id即可，不需要额外赋值
  })
}

// 实现提交方法
sendQuestion() {
  // 遍历products直接组装成你需要的格式
  this.productQuestions = this.products.map(item => {
    return {
      productId: item.id,
      question: item.question,
      contactBack: item.contactBack
    }
  })
  // 这里可以加后续提交逻辑，打印验证结果也可以
  console.log(this.productQuestions);
}

步骤2：修改question.page.html的绑定逻辑 #

把原来绑定到全局变量的ngModel，改成绑定到当前循环的product对象的对应属性：

<details *ngFor="let product of products;">
    <!-- productId直接用product.id，不需要用户输入的话可以加hidden或者disabled属性 -->
    <ion-input type="text" [(ngModel)]="product.id" value="{{product.id}}" disabled></ion-input>

    <h2>Question</h2>
    <ion-input type="text" [(ngModel)]="product.question"></ion-input>

    <h2>Contact Back</h2>
    <ion-select [(ngModel)]="product.contactBack" interface="popover">
       <ion-select-option value="0">No</ion-select-option>
       <ion-select-option value="1">Yes</ion-select-option>
    </ion-select>
</details>

<ion-button type="button" (click)="sendQuestion()">Send Question</ion-button>

补充说明 #

如果不想污染原products数组的结构，也可以单独创建一个和products长度一致的表单数组，绑定的时候用索引对应即可：给*ngFor加let i=index的索引声明，然后ngModel绑定为formArr[i].question这种格式，效果完全一致。

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