Angular实现可点击编辑/删除的客户表单列表数组

1. 更新组件逻辑（contacts.component.ts） #

添加状态跟踪变量和操作方法，支持编辑、更新、删除功能：

import { Component, ViewChild, NgForm } from '@angular/core';

@Component({
  selector: 'app-contacts',
  templateUrl: './contacts.component.html',
  styleUrls: ['./contacts.component.css']
})
export class ContactsComponent {
  contacts: any = [];
  // 跟踪当前编辑的联系人及其索引
  currentContact: any = null;
  currentIndex: number = -1;
  // 获取表单引用
  @ViewChild('add') addForm!: NgForm;

  addContact(add: any) {
    if (this.currentContact) {
      // 更新现有联系人
      this.contacts[this.currentIndex] = { ...add.value };
      // 重置编辑状态
      this.currentContact = null;
      this.currentIndex = -1;
    } else {
      // 添加新联系人
      this.contacts.push({ ...add.value });
    }
    add.resetForm();
  }

  // 点击列表项时回填表单
  onContactClick(contact: any, index: number) {
    this.currentContact = contact;
    this.currentIndex = index;
    // 将联系人数据填充到表单
    this.addForm.patchValue(contact);
  }

  // 删除联系人
  deleteContact(index: number) {
    this.contacts.splice(index, 1);
    // 如果删除的是当前编辑的联系人，重置表单
    if (this.currentIndex === index) {
      this.currentContact = null;
      this.currentIndex = -1;
      this.addForm.resetForm();
    }
  }

  // 取消编辑
  cancelEdit() {
    this.currentContact = null;
    this.currentIndex = -1;
    this.addForm.resetForm();
  }
}

2. 修改模板（contacts.component.html） #

调整列表项添加点击事件和操作按钮，同时切换表单的添加/更新模式：

<div class="main">
  <label class="nameLbl">联系人列表</label>
  <ul>
    <li *ngFor="let contact of contacts; let i = index" (click)="onContactClick(contact, i)">
      {{contact.firstName}} {{contact.lastName}}
      <!-- 添加编辑和删除按钮，阻止事件冒泡避免触发列表项点击 -->
      <button class="edit-btn" (click)="$event.stopPropagation()">编辑</button>
      <button class="delete-btn" (click)="deleteContact(i); $event.stopPropagation()">删除</button>
    </li>
  </ul>
</div>

<form #add="ngForm" (ngSubmit)="addContact(add)">
  <div class="form-group">
    <label for="firstName">First Name</label>
    <input class="inpt" type="text" id="firstName" name="firstName" ngModel />
  </div>
  <div class="form-group">
    <label for="lastName">Last Name</label>
    <input class="inpt" type="text" id="lastName" name="lastName" ngModel />
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input class="inpt" type="email" id="email" name="email" ngModel />
  </div>
  <div class="form-group">
    <label for="address1">Address 1</label>
    <input class="inpt" type="text" id="address1" name="address1" ngModel />
  </div>
  <div class="form-group">
    <label for="address2">Address 2</label>
    <input class="inpt" type="text" id="address2" name="address2" ngModel />
  </div>
  <div class="form-group">
    <label for="city">City</label>
    <input class="inpt" type="text" id="city" name="city" ngModel />
  </div>
  <div class="form-group">
    <label for="postcode">PostCode</label>
    <input class="inpt" type="text" id="postcode" name="postcode" ngModel />
  </div>
  <div class="form-group">
    <label for="telephone">Telephone</label>
    <input class="inpt" type="number" id="telephone" name="telephone" ngModel />
  </div>

  <br>
  <!-- 根据编辑状态切换按钮文本 -->
  <button class="addContactBtn" type="submit">{{currentContact ? '更新联系人' : '添加联系人'}}</button>
  <!-- 编辑状态下显示取消按钮 -->
  <button *ngIf="currentContact" class="cancel-btn" type="button" (click)="cancelEdit()">取消</button>
</form>

3. 可选样式调整（contacts.component.css） #

添加简单样式避免按钮占满列表项：

.edit-btn, .delete-btn {
  margin-left: 10px;
  padding: 3px 8px;
  font-size: 12px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.cancel-btn {
  margin-left: 10px;
  padding: 5px 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

li {
  padding: 8px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

li:hover {
  background-color: #f5f5f5;
}

关键说明 #

• 使用@ViewChild获取表单实例，通过patchValue快速将联系人数据填充到表单
• 列表项按钮添加$event.stopPropagation()，避免点击按钮时触发列表项的点击事件
• 通过currentContact变量区分添加/编辑模式，动态调整按钮文本和功能
• 删除联系人时同步重置编辑状态，避免表单残留旧数据

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