Angular中CRM模型编辑删除按钮与字段绑定问题求助

Hey there! I see you're having trouble getting the edit/delete button bindings working in Angular for your CRM model, even though you've got the APIs ready. Let's fix this step by step, focusing on the Bootstrap modals you provided.

Delete Modal Fixes #

Right now, your delete modal doesn't know which department you want to target, and the delete button isn't hooked up to any Angular logic. Here's how to adjust it:

1. Track the selected department: In your component, add a property to store the department you want to delete:

   selectedDepartment: any;
   

2. Update the list's delete button: When you click to open the delete modal from your department list, pass the target department:

   <!-- Example delete button in your department list -->
   <button class="btn btn-danger" data-toggle="modal" data-target="#delete_department" (click)="setSelectedDepartment(list)">Delete</button>
   

3. Modify the modal to use the selected data and trigger the API call:

   <div id="delete_department" class="modal custom-modal fade" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content modal-md">
         <div class="modal-header">
           <h4 class="modal-title">Delete Department</h4>
         </div>
         <div class="modal-body card-box">
           <p>Are you sure you want to delete <strong>{{selectedDepartment?.name}}</strong>?</p>
           <div class="m-t-20 text-left">
             <a href="#" class="btn btn-default" data-dismiss="modal">Close</a>
             <button type="button" class="btn btn-danger" (click)="deleteDepartment(selectedDepartment.id)" data-dismiss="modal">Delete</button>
           </div>
         </div>
       </div>
     </div>
   </div>
   

Edit Modal Fixes #

Your edit modal has a hardcoded input value and lacks two-way data binding to sync with your component. Let's fix that:

1. Create an edit model in your component:

   editDepartment: any = { id: null, name: '' };
   

2. Update the modal for two-way binding:

   <div id="edit_department" class="modal custom-modal fade" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content modal-md">
         <div class="modal-header">
           <h4 class="modal-title">Edit Department</h4>
           <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <div class="modal-body">
           <form>
             <div class="form-group">
               <label>Department Name <span class="text-danger">*</span></label>
               <input class="form-control" [(ngModel)]="editDepartment.name" name="departmentName" type="text" required>
             </div>
             <div class="m-t-20 text-center">
               <button class="btn btn-primary btn-lg" (click)="updateDepartment(editDepartment)" data-dismiss="modal">Save Changes</button>
             </div>
           </form>
         </div>
       </div>
     </div>
   </div>
   

   Note: I moved the close button to the modal header (where it belongs) and removed the duplicate (click)="edit(list)" — we'll populate the edit data when opening the modal instead.

3. Add a button to populate the edit form:

   <!-- Example edit button in your department list -->
   <button class="btn btn-primary" data-toggle="modal" data-target="#edit_department" (click)="populateEditForm(list)">Edit</button>
   

Component Logic (TypeScript) #

Add these methods to your component to handle data sync and API calls:

import { Component } from '@angular/core';
// Import your department service for API interactions
import { DepartmentService } from './department.service';

@Component({
  selector: 'app-departments',
  templateUrl: './departments.component.html',
  styleUrls: ['./departments.component.css']
})
export class DepartmentsComponent {
  selectedDepartment: any;
  editDepartment: any = { id: null, name: '' };
  departments: any[] = []; // Your main department list

  constructor(private departmentService: DepartmentService) {}

  ngOnInit() {
    this.loadDepartments(); // Load initial data on component init
  }

  setSelectedDepartment(department: any) {
    this.selectedDepartment = department;
  }

  populateEditForm(department: any) {
    // Clone the object to avoid modifying the original list directly
    this.editDepartment = { ...department };
  }

  deleteDepartment(departmentId: number) {
    this.departmentService.deleteDepartment(departmentId).subscribe({
      next: () => {
        this.loadDepartments(); // Refresh list after deletion
        alert('Department deleted successfully!');
      },
      error: (err) => {
        console.error('Delete error:', err);
        alert('Failed to delete department.');
      }
    });
  }

  updateDepartment(updatedDepartment: any) {
    this.departmentService.updateDepartment(updatedDepartment.id, updatedDepartment).subscribe({
      next: () => {
        this.loadDepartments(); // Refresh list after update
        alert('Department updated successfully!');
      },
      error: (err) => {
        console.error('Update error:', err);
        alert('Failed to update department.');
      }
    });
  }

  loadDepartments() {
    this.departmentService.getDepartments().subscribe(data => {
      this.departments = data;
    });
  }
}

Quick Important Notes #

• Don't forget to import FormsModule in your Angular module to use [(ngModel)]:

  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports: [
      // Other imports...
      FormsModule
    ]
  })
  export class AppModule { }
  

• For better Angular-Bootstrap integration, consider using ng-bootstrap instead of jQuery-based Bootstrap — it plays nicer with Angular's change detection and avoids potential conflicts.

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