如何在Angular中基于静态JSON数组通过响应式表单实现CRUD操作并展示数据到表格（无需API）

我来一步步教你实现这个需求，全程不需要后端API，就用你提供的静态JSON数组搞定！下面是完整的实现步骤和代码示例：

1. 先把静态数据管理起来 #

我推荐用一个专用服务来管理用户数据，这样CRUD操作都集中在一处，组件只负责调用逻辑，后续扩展也更方便。

第一步：创建用户数据服务 #

运行Angular CLI命令生成服务：

ng generate service user-data

然后在user-data.service.ts里写入以下代码（我已经修正了你原JSON里邮箱字段的格式错误）：

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

// 定义用户类型接口
export interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

@Injectable({
  providedIn: 'root'
})
export class UserDataService {
  // 初始化静态用户数组
  private users: User[] = [
    {
      "id": 1,
      "name": "John Doe",
      "email": "john.doe@example.com",
      "age": 25
    },
    {
      "id": 2,
      "name": "Jane Doe",
      "email": "jane.doe@example.com",
      "age": 28
    },
    {
      "id": 3,
      "name": "Bob Smith",
      "email": "bob.smith@example.com",
      "age": 30
    }
  ];

  // 获取所有用户（返回副本避免直接修改原数组）
  getUsers(): User[] {
    return [...this.users];
  }

  // 新增用户：自动生成唯一ID
  addUser(user: Omit<User, 'id'>): void {
    const newId = Math.max(...this.users.map(u => u.id)) + 1;
    this.users.push({ ...user, id: newId });
  }

  // 更新用户
  updateUser(updatedUser: User): void {
    const index = this.users.findIndex(u => u.id === updatedUser.id);
    if (index !== -1) {
      this.users[index] = updatedUser;
    }
  }

  // 删除用户
  deleteUser(userId: number): void {
    this.users = this.users.filter(u => u.id !== userId);
  }
}

2. 搭建响应式表单 #

接下来我们需要在组件里实现表单逻辑，首先确保你的模块（比如app.module.ts）已经导入了响应式表单模块：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块
    ReactiveFormsModule
  ]
})
export class AppModule { }

然后创建一个CRUD组件（比如user-crud.component.ts），编写以下逻辑：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserDataService, User } from '../user-data.service';

@Component({
  selector: 'app-user-crud',
  templateUrl: './user-crud.component.html',
  styleUrls: ['./user-crud.component.css']
})
export class UserCrudComponent implements OnInit {
  userForm: FormGroup;
  users: User[] = [];
  editingUser: User | null = null; // 标记当前是否在编辑状态

  constructor(
    private fb: FormBuilder,
    private userDataService: UserDataService
  ) {
    // 初始化表单，添加验证规则
    this.userForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      age: ['', [Validators.required, Validators.min(18)]]
    });
  }

  ngOnInit(): void {
    // 页面加载时获取初始用户数据
    this.loadUsers();
  }

  // 重新加载用户列表
  loadUsers(): void {
    this.users = this.userDataService.getUsers();
  }

  // 编辑用户：将选中用户的数据填充到表单
  editUser(user: User): void {
    this.editingUser = user;
    this.userForm.patchValue(user);
  }

  // 提交表单：区分新增和更新操作
  onSubmit(): void {
    if (this.userForm.invalid) {
      alert('请填写正确的表单信息！');
      return;
    }

    const formValue = this.userForm.value;
    if (this.editingUser) {
      // 执行更新逻辑
      const updatedUser: User = { ...this.editingUser, ...formValue };
      this.userDataService.updateUser(updatedUser);
    } else {
      // 执行新增逻辑
      this.userDataService.addUser(formValue);
    }

    // 重置表单和编辑状态
    this.resetForm();
    // 刷新用户列表
    this.loadUsers();
  }

  // 删除用户：添加确认提示避免误操作
  deleteUser(userId: number): void {
    if (confirm('确定要删除这个用户吗？')) {
      this.userDataService.deleteUser(userId);
      this.loadUsers();
    }
  }

  // 重置表单
  resetForm(): void {
    this.userForm.reset();
    this.editingUser = null;
  }
}

3. 编写模板：表单+表格展示 #

现在编写组件的HTML模板user-crud.component.html，把表单和用户表格结合起来：

<div class="container">
  <h2>用户管理系统</h2>

  <!-- 响应式表单区域 -->
  <div class="form-card">
    <h3>{{ editingUser ? '编辑用户' : '新增用户' }}</h3>
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <div class="form-group">
        <label>姓名</label>
        <input type="text" formControlName="name" class="form-input">
        <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched" class="error-text">
          姓名不能为空
        </div>
      </div>

      <div class="form-group">
        <label>邮箱</label>
        <input type="email" formControlName="email" class="form-input">
        <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched" class="error-text">
          <span *ngIf="userForm.get('email')?.errors?.['required']">邮箱不能为空</span>
          <span *ngIf="userForm.get('email')?.errors?.['email']">请输入有效的邮箱地址</span>
        </div>
      </div>

      <div class="form-group">
        <label>年龄</label>
        <input type="number" formControlName="age" class="form-input">
        <div *ngIf="userForm.get('age')?.invalid && userForm.get('age')?.touched" class="error-text">
          <span *ngIf="userForm.get('age')?.errors?.['required']">年龄不能为空</span>
          <span *ngIf="userForm.get('age')?.errors?.['min']">年龄不能小于18岁</span>
        </div>
      </div>

      <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">
        {{ editingUser ? '更新用户' : '添加用户' }}
      </button>
      <button type="button" class="btn btn-secondary" (click)="resetForm()" *ngIf="editingUser">取消编辑</button>
    </form>
  </div>

  <!-- 用户表格展示区域 -->
  <div class="table-card mt-4">
    <h3>用户列表</h3>
    <table class="user-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let user of users">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.age }}</td>
          <td>
            <button class="btn btn-sm btn-info" (click)="editUser(user)">编辑</button>
            <button class="btn btn-sm btn-danger" (click)="deleteUser(user.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

可以加一点简单的CSS美化界面（user-crud.component.css）：

.container {
  max-width: 1000px;
  margin: 30px auto;
  padding: 0 20px;
}

.form-card, .table-card {
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  background-color: #fff;
}

.form-group {
  margin-bottom: 20px;
}

.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.error-text {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 5px;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
}

.user-table th, .user-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.user-table th {
  background-color: #f8f9fa;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  margin-left: 10px;
}

.btn-sm {
  padding: 4px 8px;
  margin-right: 8px;
}

.btn-info {
  background-color: #17a2b8;
  color: #fff;
}

.btn-danger {
  background-color: #dc3545;
  color: #fff;
}

.mt-4 {
  margin-top: 24px;
}

4. 测试功能 #

现在运行ng serve启动Angular应用，你就能体验完整的CRUD功能了：

• 页面加载后自动展示静态用户列表
• 可以通过表单新增用户，表单会自动验证输入内容
• 点击表格中的「编辑」按钮，表单会填充对应用户的数据，提交后更新列表
• 点击「删除」按钮，会弹出确认框，确认后移除对应用户

所有操作都在前端内存中完成，完全不需要后端API支持。

备注：内容来源于stack exchange，提问作者AnkaDel