Angular表格数据获取与提交实现咨询及相关技术疑问

1. 定义数据模型 #

先创建对应表格行数据的TypeScript接口，规范数据结构：

// 匹配表格列的字段，可根据实际需求调整
interface TableRowData {
  name: string;
  quantity: number;
}

2. 组件中初始化数据数组 #

在组件类里维护一个数组存储表格所有行的数据，支持动态增删行：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-table-form',
  templateUrl: './table-form.component.html',
  styleUrls: ['./table-form.component.css']
})
export class TableFormComponent {
  // 存储表格行数据，初始化一行空数据
  tableRows: TableRowData[] = [{ name: '', quantity: 0 }];

  constructor(private http: HttpClient) {}

  // 添加新行
  addNewRow() {
    this.tableRows.push({ name: '', quantity: 0 });
  }

  // 删除指定行
  removeRow(index: number) {
    this.tableRows.splice(index, 1);
  }
}

3. 模板绑定输入框与表格 #

用Angular双向数据绑定[(ngModel)]同步输入框值与数组数据，自动更新：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>数量</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 循环渲染所有行 -->
    <tr *ngFor="let row of tableRows; let i = index">
      <td><input type="text" [(ngModel)]="row.name" placeholder="输入名称"></td>
      <td><input type="number" [(ngModel)]="row.quantity" placeholder="输入数量"></td>
      <td><button (click)="removeRow(i)">删除</button></td>
    </tr>
  </tbody>
</table>

<button (click)="addNewRow()">添加行</button>
<button (click)="submitData()">保存到数据库</button>

4. 用forEach处理数据并提交 #

实现提交方法，通过forEach遍历数据做验证或预处理，再发送到后端：

submitData() {
  // 用forEach遍历所有行，做数据校验
  this.tableRows.forEach((row, index) => {
    if (!row.name.trim()) {
      alert(`第${index+1}行名称不能为空！`);
      return;
    }
    if (row.quantity <= 0) {
      alert(`第${index+1}行数量必须大于0！`);
      return;
    }
  });

  // 提交到后端接口，替换为你的实际API地址
  this.http.post('/api/save-table-data', this.tableRows)
    .subscribe({
      next: () => {
        alert('数据保存成功！');
        // 重置表格数据
        this.tableRows = [{ name: '', quantity: 0 }];
      },
      error: (err) => {
        console.error('保存失败：', err);
        alert('数据保存失败，请重试！');
      }
    });
}

注意事项 #

需在app.module.ts中导入必要模块：

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [FormsModule, HttpClientModule]
})
export class AppModule {}

关于jQuery实现的问题 #

可以用jQuery实现，但不推荐在Angular项目中混用——Angular自身的双向绑定和变更检测机制已经足够完善，混用jQuery会破坏框架原有逻辑，增加维护成本。如果一定要用，实现思路如下：

$('#submit-btn').click(function() {
  const tableData = [];
  // 遍历表格行收集数据
  $('table tbody tr').each(function() {
    const row = {
      name: $(this).find('input[name="name"]').val(),
      quantity: $(this).find('input[name="quantity"]').val()
    };
    tableData.push(row);
  });

  // 发送AJAX请求
  $.ajax({
    url: '/api/save-table-data',
    method: 'POST',
    data: JSON.stringify(tableData),
    contentType: 'application/json',
    success: () => alert('数据保存成功！'),
    error: (err) => console.error('保存失败：', err)
  });
});

旧Angular代码的解释 #

你看到的var app = angular.module('plunker', []);是**AngularJS（Angular 1.x）**的代码，和现在的Angular（2+）是完全不同的框架：

• 这里的angular是AngularJS框架全局暴露的核心变量，通过它可以创建AngularJS应用的模块（Module），模块是旧框架的核心容器，用于注册控制器、服务等组件。
• 当前的Angular（2+）采用TypeScript模块化架构，已经没有这种全局变量，所以该代码不适用于现代Angular项目。

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