Angular中如何在表格展示对象数组并实现数据更新

你的代码存在以下核心问题： #

• 模板未通过循环变量 item 正确访问对象属性，itemName、itemColour 应改为 item.itemName、item.itemColour
• 输入框未与当前行的 item 绑定，无法获取或修改对应数据
• updateItemName() 方法未接收当前行的 id 和输入的新名称，无法定位要更新的条目
• 按钮的 displayIf 是无效指令，Angular 中应使用 *ngIf，且缺少判断输入是否修改的逻辑
• 组件中 items 未初始化，可能导致模板渲染报错

方案1：使用双向绑定（简单场景） #

组件代码：

import { Component, OnInit } from '@angular/core';
import { YourItemService } from './your-item.service'; // 替换为你的服务路径

interface Item {
  id: number;
  itemName: string;
  itemColour: string;
}

@Component({
  selector: 'app-item-table',
  templateUrl: './item-table.component.html',
  styleUrls: ['./item-table.component.css']
})
export class ItemTableComponent implements OnInit {
  items: Item[] = [];
  originalNames: Map<number, string> = new Map();

  constructor(private itemService: YourItemService) { }

  ngOnInit(): void {
    this.itemService.getItems().subscribe({
      next: data => {
        // 若服务直接返回对象则删除JSON.parse，仅在返回JSON字符串时保留
        this.items = JSON.parse(data).items;
        // 保存原始名称用于判断修改状态
        this.items.forEach(item => {
          this.originalNames.set(item.id, item.itemName);
        });
      },
      error: err => {
        console.error('获取数据失败:', err);
      }
    });
  }

  updateItemName(item: Item): void {
    this.itemService.updateItemName(item.id, item.itemName).subscribe({
      next: () => {
        this.originalNames.set(item.id, item.itemName);
      },
      error: err => {
        console.error('更新失败:', err);
        // 失败后恢复原始名称
        item.itemName = this.originalNames.get(item.id) || '';
      }
    });
  }

  hasChanged(item: Item): boolean {
    return item.itemName !== this.originalNames.get(item.id);
  }
}

模板代码：

<tbody>
    <tr *ngFor="let item of items; let i=index">
        <td><input [(ngModel)]="item.itemName" placeholder="修改名称"></td>
        <td>{{item.itemColour}}</td>
        <td>
            <button (click)="updateItemName(item)" *ngIf="hasChanged(item)">Update</button>
        </td>
    </tr>
</tbody>

方案2：使用 FormArray（规范表单场景） #

组件代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray, FormControl, Validators } from '@angular/forms';
import { YourItemService } from './your-item.service';

interface Item {
  id: number;
  itemName: string;
  itemColour: string;
}

@Component({
  selector: 'app-item-table',
  templateUrl: './item-table.component.html',
  styleUrls: ['./item-table.component.css']
})
export class ItemTableComponent implements OnInit {
  items: Item[] = [];
  itemFormArray: FormArray;

  constructor(
    private fb: FormBuilder,
    private itemService: YourItemService
  ) {
    this.itemFormArray = this.fb.array([]);
  }

  ngOnInit(): void {
    this.itemService.getItems().subscribe({
      next: data => {
        this.items = JSON.parse(data).items;
        // 初始化FormArray
        this.items.forEach(item => {
          this.itemFormArray.push(
            this.fb.group({
              id: new FormControl(item.id),
              itemName: new FormControl(item.itemName, Validators.required),
              originalName: new FormControl(item.itemName)
            })
          );
        });
      },
      error: err => {
        console.error('获取数据失败:', err);
      }
    });
  }

  get formControls() {
    return this.itemFormArray.controls as any[];
  }

  updateItemName(index: number): void {
    const formGroup = this.formControls[index];
    const id = formGroup.get('id')?.value;
    const newName = formGroup.get('itemName')?.value;

    if (id && newName) {
      this.itemService.updateItemName(id, newName).subscribe({
        next: () => {
          formGroup.get('originalName')?.setValue(newName);
        },
        error: err => {
          console.error('更新失败:', err);
          formGroup.get('itemName')?.setValue(formGroup.get('originalName')?.value);
        }
      });
    }
  }

  hasChanged(index: number): boolean {
    const formGroup = this.formControls[index];
    return formGroup.get('itemName')?.value !== formGroup.get('originalName')?.value;
  }
}

模板代码：

<form [formGroup]="itemFormArray">
  <tbody>
      <tr *ngFor="let group of formControls; let i=index" [formGroupName]="i">
          <td><input formControlName="itemName" placeholder="修改名称"></td>
          <td>{{items[i].itemColour}}</td>
          <td>
              <button (click)="updateItemName(i)" *ngIf="hasChanged(i)">Update</button>
          </td>
      </tr>
  </tbody>
</form>

注意事项： #

1. 确保在对应模块中导入 FormsModule（方案1）或 ReactiveFormsModule（方案2）
2. 若服务返回的已是 JavaScript 对象，删除 JSON.parse(data)，直接赋值 this.items = data.items
3. 可添加加载状态、错误提示等交互细节，提升用户体验

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