Angular 8 如何向数组推入多个对象实现表单数据表格展示

前置依赖配置 #

首先确保当前功能所属的模块（如app.module.ts）中已经引入了FormsModule，否则模板双向绑定无法生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 必须引入这个模块

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], // 加入到imports数组中
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件逻辑层（.ts文件）实现 #

1. 定义存储数组与表单绑定对象 #

import { Component } from '@angular/core';

// 可选：定义数据接口，规范字段结构
interface DataItem {
  field1: string;
  field2: string;
}

@Component({
  selector: 'app-data-form',
  templateUrl: './data-form.component.html'
})
export class DataFormComponent {
  // 存储所有提交数据的数组
  public dataList: DataItem[] = [];
  // 绑定表单输入的临时对象，初始值为空字符串
  public formData: DataItem = {
    field1: '',
    field2: ''
  };

  // 保存按钮触发的提交方法
  onSave() {
    // 基础非空校验，避免推入无效空数据
    if (!this.formData.field1.trim() || !this.formData.field2.trim()) {
      alert('请完整输入两个字段的内容');
      return;
    }

    // *核心逻辑：拷贝当前表单数据推入数组，避免引用同步修改问题
    // 不能直接push(this.formData)，否则后续修改表单输入时，数组里已存的对象会被同步改动
    this.dataList.push({ ...this.formData });

    // 提交后重置表单，方便下一次输入
    this.formData = { field1: '', field2: '' };
  }
}

模板层（.html文件）实现 #

直接绑定表单输入、保存事件与表格渲染逻辑：

<!-- 表单区域 -->
<div class="form-container" style="margin: 20px 0;">
  <input 
    type="text" 
    [(ngModel)]="formData.field1" 
    placeholder="请输入第一个字段内容"
    style="margin-right: 10px; padding: 4px;"
  >
  <input 
    type="text" 
    [(ngModel)]="formData.field2" 
    placeholder="请输入第二个字段内容"
    style="margin-right: 10px; padding: 4px;"
  >
  <button (click)="onSave()" style="padding: 4px 12px;">保存</button>
</div>

<!-- 数据展示表格 -->
<table *ngIf="dataList.length > 0" border="1" cellpadding="8" style="border-collapse: collapse; width: 100%; max-width: 600px;">
  <thead>
    <tr>
      <th>序号</th>
      <th>第一个字段</th>
      <th>第二个字段</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataList; let i = index">
      <td>{{ i + 1 }}</td>
      <td>{{ item.field1 }}</td>
      <td>{{ item.field2 }}</td>
    </tr>
  </tbody>
</table>

<!-- 空数据提示 -->
<div *ngIf="dataList.length === 0" style="margin-top: 20px; color: #666;">
  暂无已存储的表单数据
</div>

关键注意事项 #

• 推入数组时必须对表单绑定对象做浅拷贝，直接推入原始对象会因为JS引用类型的特性，导致后续表单输入修改时，数组中已存储的历史数据被同步篡改
• 可根据业务需求在onSave方法中扩展自定义校验规则，比如字段格式、长度限制等
• 如果需要使用响应式表单实现，逻辑与上述流程类似，只需将ngModel双向绑定替换为formControl绑定，在onSave方法中通过formGroup.value获取表单值后执行推入逻辑即可

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