Akveo Smart Table for Angular增删改及数据库交互实现咨询

Hey there! I’ve worked with Akveo Smart Table for Angular quite a bit, so let me break down how to handle create, update, delete operations and sync those changes with your database. The table itself provides UI hooks for these actions, but you’ll need to pair them with Angular services to talk to your backend.

Setup Basics #

First, make sure you have a dedicated data service (e.g., DataService) that handles HTTP requests to your database. This service will have methods like createRecord(), updateRecord(), and deleteRecord() to interact with your backend endpoints.

1. Adding a New Row (Create) #

Smart Table doesn’t include a built-in "add" button by default, so we’ll add a custom button and use a modal to collect new data:

Template Code #

<nb-smart-table [source]="dataSource" [settings]="tableSettings"></nb-smart-table>
<button nbButton status="primary" (click)="openAddRecordModal()">Add New Record</button>

Component Logic #

Use Nebular’s NbDialogService (or Angular Material Dialog if you prefer) to open a form modal:

import { NbDialogService } from '@nebular/theme';
import { AddRecordModalComponent } from './modals/add-record-modal.component';
import { DataService } from '../services/data.service';

constructor(
  private dialogService: NbDialogService,
  private dataService: DataService
) {}

openAddRecordModal() {
  const dialogRef = this.dialogService.open(AddRecordModalComponent);
  
  dialogRef.onClose.subscribe(newRecord => {
    if (newRecord) {
      // Send new data to your backend
      this.dataService.createRecord(newRecord).subscribe({
        next: (savedRecord) => {
          // Add the saved record to your table data source
          this.dataSource.push(savedRecord);
          // Trigger Angular change detection to refresh the table
          this.dataSource = [...this.dataSource];
        },
        error: (err) => {
          console.error('Failed to save record:', err);
          // Show a toast/alert to the user (use NbToastService for this)
        }
      });
    }
  });
}

Your AddRecordModalComponent will be a simple reactive form that collects user input and returns the new record object when closed.

2. Editing a Row (Update) #

Smart Table has built-in edit functionality—we just need to enable it and hook into the confirm event:

Configure Table Settings #

tableSettings = {
  actions: {
    edit: true, // Enable edit action
    delete: true,
  },
  edit: {
    confirmSave: true, // Prompt user to confirm edits
  },
  columns: {
    id: { title: 'ID', editable: false },
    name: { title: 'Full Name' },
    email: { title: 'Email' },
    // Add your other columns here
  },
};

Template & Component Logic #

Listen for the editConfirm event to handle the update:

<nb-smart-table 
  [source]="dataSource" 
  [settings]="tableSettings"
  (editConfirm)="handleEditConfirm($event)"
></nb-smart-table>

handleEditConfirm(event: any) {
  // event.data contains the edited row data
  this.dataService.updateRecord(event.data.id, event.data).subscribe({
    next: (updatedRecord) => {
      // Update the row in your data source
      const rowIndex = this.dataSource.findIndex(item => item.id === updatedRecord.id);
      if (rowIndex !== -1) {
        this.dataSource[rowIndex] = updatedRecord;
        this.dataSource = [...this.dataSource];
      }
      // Confirm the edit to the table to close the edit mode
      event.confirm.resolve(updatedRecord);
    },
    error: (err) => {
      console.error('Failed to update record:', err);
      // Reject the edit if something goes wrong
      event.confirm.reject(err);
    }
  });
}

3. Deleting a Row (Delete) #

Similar to editing, enable the delete action and handle the confirm event:

Template & Component Logic #

<nb-smart-table 
  [source]="dataSource" 
  [settings]="tableSettings"
  (deleteConfirm)="handleDeleteConfirm($event)"
></nb-smart-table>

handleDeleteConfirm(event: any) {
  if (window.confirm('Are you sure you want to delete this record?')) {
    this.dataService.deleteRecord(event.data.id).subscribe({
      next: () => {
        // Remove the deleted row from your data source
        this.dataSource = this.dataSource.filter(item => item.id !== event.data.id);
        // Confirm the deletion to the table
        event.confirm.resolve();
      },
      error: (err) => {
        console.error('Failed to delete record:', err);
        event.confirm.reject(err);
      }
    });
  } else {
    // User canceled the deletion
    event.confirm.reject();
  }
}

Key Tips #

• Always use the spread operator ([...this.dataSource]) when updating your data source—this triggers Angular’s change detection and ensures the table refreshes.
• Add user feedback for success/error states (e.g., Nebular’s NbToastService) to make the experience more intuitive.
• For custom actions (like bulk delete), use the custom property in tableSettings.actions and listen to the customEvent to handle them.

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