Angular中如何将HTML表格数据传递至组件并遍历行处理？

当然可以实现！我来给你一步步梳理解决方案，刚好能满足你遍历行数据处理的需求～

核心思路是：把每行的输入框和对应的表格数据做双向绑定，这样用户填写金额后，数据会自动同步到组件的数组里，提交时直接遍历这个数组就能拿到完整的每行数据（包括Activity Name、账户名和用户输入的Amount）。

1. 先更新数据模型，添加Amount字段 #

首先在ActivityResult类里新增Amount属性，用来存储用户输入的金额：

// database.service.ts
export class ActivityResult {
  Activity_Description: string;
  From_Account_Name: string;
  To_Account_Name: string;
  Amount: string; // 新增字段，存储用户输入的金额
}

2. 修改HTML模板，实现双向绑定 #

把原来的输入框改成双向绑定，直接关联到activityresult.Amount，同时设置独立模式避免表单组冲突：

<!-- Account.component.html -->
<form [formGroup]="CmForm" (ngSubmit)="submit()" name="CmForm" >
  <div class="form-group">
    <label for="dateselection">Enter Date you are processing.</label>
    <input type="date" id="dateselection" 
           value="{{ yesterday | date:'yyyy-MM-dd'}}" 
           min="2015-01-01" max="{{ yesterday | date:'yyyy-MM-dd'}}" 
           (change)="changedDate($event)" class="datepicker" />
    <br>
    <br>
    <br><h3>Cash Movement</h3>
    <table class="responstable" >
      <tr>
        <th>Activity Name</th>
        <th>From Account </th>
        <th>To Account </th>
        <th>Amount</th>
      </tr>
      <tr *ngFor="let activityresult of activityresults" >
        <td>{{activityresult.Activity_Description}}</td>
        <td>{{activityresult.From_Account_Name}}</td>
        <td>{{activityresult.To_Account_Name}}</td>
        <!-- 双向绑定到activityresult的Amount字段，设置standalone避免表单校验冲突 -->
        <td><input type="textbox" [(ngModel)]="activityresult.Amount" [ngModelOptions]="{standalone: true}"></td>
      </tr>
    </table>
    <br>
    <input type="submit" value="Submit" /><br><br>
    <br><br><br><br>
  </div>
</form>

3. 在组件中实现提交逻辑 #

新增submit方法，直接遍历activityresults数组，调用你的服务处理每行数据：

// Account.component.ts
import { ActivityResult } from './../database.service';
import { FormGroup, FormControl, Validators } from '@angular/forms';

export class AccountComponent implements OnInit {
  CmForm: FormGroup;
  activityresults: Array<ActivityResult>;
  yesterday: Date; // 初始化昨天的日期，避免模板报错

  constructor( private databaseService: DatabaseService ) {}

  ngOnInit() {
    // 计算昨天的日期
    const today = new Date();
    this.yesterday = new Date(today.setDate(today.getDate() - 1));

    this.CmForm = new FormGroup({
      'dateselection': new FormControl(null, [Validators.required])
    });

    // 获取初始活动数据
    this.databaseService.getActivity().subscribe(
      activityresults => this.activityresults = activityresults
    );
  }

  // 提交处理方法
  submit() {
    // 可选：过滤掉未填写金额的行
    const validRows = this.activityresults.filter(row => row.Amount?.trim());
    
    // 遍历每行数据调用服务
    validRows.forEach(row => {
      this.databaseService.getData(row).subscribe(
        accountResults => {
          // 这里处理接口返回结果，比如打印、存储到变量等
          console.log('处理完成:', accountResults);
          // 如果需要存储所有结果，可以用数组收集：this.accountResults.push(accountResults)
        }
      );
    });
  }

  // 实现日期变更方法（模板中用到）
  changedDate(event: Event) {
    const selectedDate = (event.target as HTMLInputElement).value;
    console.log('选中日期:', selectedDate);
    // 这里可以添加日期相关的业务逻辑
  }
}

4. 补充服务中的getData方法 #

确保你的DatabaseService里有接收ActivityResult参数的getData方法：

// database.service.ts
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class DatabaseService {
  constructor(private _http: HttpClient) {}

  getActivity(): Observable<ActivityResult[]> {
    const url = 'http://localhost:3000/a';
    const data = ({ });
    return this._http.post(url, data)
      .pipe(
        map((res) => {
          console.log(res);
          return <ActivityResult[]> res;
        })
      );
  }

  // 新增处理单条数据的方法
  getData(account: ActivityResult): Observable<any> {
    const url = '你的接口地址'; // 替换成实际的后端接口URL
    return this._http.post(url, account)
      .pipe(
        map(res => {
          console.log('接口返回:', res);
          return res;
        })
      );
  }
}

这样修改后，用户点击提交时，activityresults数组里的每个对象都会包含完整的四个字段，你可以像预想的那样遍历数组，调用服务处理每行数据啦～

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