Angular：使用ngModel的动态表格如何获取输入数据并映射到Client类

我来帮你搞定这个问题！你现在的核心需求就是把表格里每个输入框的天数、客户类型和数量对应起来，收集成Client对象数组对吧？其实只要把双向绑定对应到正确的对象属性上就行，一步步来：

1. 先初始化clients数组 #

首先你得提前把每个「天数-客户类型」组合对应的Client实例创建好，这样输入框才有可绑定的对象。在组件的ngOnInit里做这件事：

import { Component, OnInit } from '@angular/core';
import { environment } from '../environments/environment'; // 确保路径正确
import { Client } from './client.model'; // 假设Client类在这个文件里

@Component({
  // 组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  clients: Client[] = [];
  clientTypes = ['ClientType1', 'ClientType2']; // 替换成你的实际类型数组

  ngOnInit(): void {
    // 遍历每一天（从1到activityDays）
    for (let day = 1; day <= environment.activityDays; day++) {
      // 为每个客户类型创建一个Client实例
      this.clientTypes.forEach(type => {
        this.clients.push({
          day: day,
          type: type,
          amount: 0 // 和输入框默认值保持一致
        } as Client);
      });
    }
  }

  // 辅助方法：根据天数和类型找到对应的Client对象
  getClient(day: number, type: string): Client {
    // 用!断言确保找到对象，如果你担心找不到可以加判断逻辑返回默认值
    return this.clients.find(client => client.day === day && client.type === type)!;
  }

  create() {
    // 先打印原始的Client数组
    console.log('Client数组:', this.clients);
    
    // 如果你需要转换成你想要的字符串格式
    const formattedResult = this.clients.map(client => 
      `${client.type} , Day ${client.day} , ${client.amount} clients`
    ).join('\n');
    console.log('格式化输出:\n', formattedResult);
  }
}

2. 修改模板绑定逻辑 #

原来的模板里把ngModel绑在<tr>上是不对的，得把每个输入框绑定到对应Client对象的amount属性上。修改后的模板如下：

<!-- 用form包裹，方便通过提交按钮触发create方法 -->
<form (ngSubmit)="create()">
  <table>
    <tr *ngFor="let _ of counter(environment.activityDays); let dayIndex = index" 
        class="text-center hover-table">
      <!-- 显示当前天数 -->
      <td>{{dayIndex + 1}}</td>
      <!-- 遍历每个客户类型生成输入框 -->
      <td *ngFor="let clientType of clientTypes">
        <div>
          <input 
            class='text-center field' 
            type='number' 
            min='0' 
            required
            <!-- 绑定到对应的Client对象的amount属性 -->
            [(ngModel)]="getClient(dayIndex + 1, clientType).amount"
            <!-- 声明输入框为独立控件，避免未加入表单组的报错 -->
            [ngModelOptions]="{standalone: true}"
          />
        </div>
      </td>
    </tr>
  </table>
  <button type="submit">提交</button>
</form>

3. 补充counter函数 #

确保你的counter函数能正确生成对应长度的数组，让*ngFor能循环指定天数：

counter(n: number): number[] {
  return Array(n).fill(0);
}

关键点说明 #

• 为什么要提前初始化clients？因为双向绑定需要有具体的对象可以绑定，不能直接绑到空数组上，否则Angular找不到对应的属性。
• getClient方法是为了快速定位到每个输入框对应的Client实例，避免在模板里写复杂的查找逻辑。
• 输入框加上[ngModelOptions]="{standalone: true}"是因为如果没有把输入框放到Angular表单组（FormGroup）里，需要声明它是独立的，否则会触发表单验证报错。

这样修改后，当你在输入框里输入数值，对应的Client对象的amount会自动更新，点击提交按钮调用create方法时，就能在控制台看到你想要的Client数组和格式化后的输出了！

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