Angular Smartadmin模板下Datatable保存后不刷新问题求解

我之前在Smartadmin Angular里处理过类似的场景，刚好可以给你梳理下步骤。因为Smartadmin的表格组件是基于DataTables封装的，所以要按Angular的方式获取到DataTables实例，再调用ajax.reload()就可以了，具体分两种场景来说：

场景1：保存按钮和表格在同一个组件里 #

首先，你需要通过@ViewChild获取到Smartadmin表格组件的实例，然后在保存成功的回调里触发表格刷新：

1. 先导入表格组件并声明ViewChild引用：

import { Component, OnInit, ViewChild } from '@angular/core';
// 导入Smartadmin的DataTables组件（根据你的版本，可能是SaDatatableComponent）
import { DatatableComponent } from '@smartadmin/datatable';
// 其他必要导入...

@Component({
  selector: 'app-tax-manager',
  templateUrl: './tax-manager.component.html'
})
export class TaxManagerComponent implements OnInit {
  // 获取表格组件实例
  @ViewChild(DatatableComponent) taxTable: DatatableComponent;
  // 你的表单和其他属性...

  constructor(private taxService: TaxService, private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单等逻辑
  }

  saveTax(): void {
    if (this.taxForm.valid) {
      this.taxService.saveTax(this.taxForm.value).subscribe({
        next: (response) => {
          // 保存成功后刷新表格
          this.refreshDatatable();
          // 这里可以加提示，比如成功弹窗
        },
        error: (err) => {
          // 错误处理逻辑
        }
      });
    }
  }

  private refreshDatatable(): void {
    // Smartadmin的表格组件里有dtInstance属性，是Promise类型，resolve后得到DataTables实例
    if (this.taxTable?.dtInstance) {
      this.taxTable.dtInstance.then((dtInstance) => {
        // 调用DataTables的ajax.reload方法刷新数据
        dtInstance.ajax.reload();
      });
    }
  }
}

2. 确保你的表格配置里已经设置了ajax选项（这样reload才会重新请求后端数据）：

// 表格配置示例
tableOptions: DataTables.Settings = {
  ajax: {
    url: '/api/taxes', // 你的数据接口地址
    type: 'GET'
  },
  columns: [
    { title: '税名', data: 'name' },
    { title: '税率', data: 'rate' },
    // 其他列配置...
  ],
  // 其他分页、排序等配置
};

场景2：保存按钮在独立组件（比如弹窗），表格在父组件里 #

这种情况需要通过EventEmitter通知父组件刷新表格：

1. 在你的save-tax.component.ts里定义输出事件：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
// 其他导入...

@Component({
  selector: 'app-save-tax',
  templateUrl: './save-tax.component.html'
})
export class SaveTaxComponent implements OnInit {
  @Output() taxSaved = new EventEmitter<void>();
  // 表单属性...

  constructor(private taxService: TaxService, private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单
  }

  saveTax(): void {
    if (this.taxForm.valid) {
      this.taxService.saveTax(this.taxForm.value).subscribe({
        next: () => {
          // 通知父组件保存成功，需要刷新表格
          this.taxSaved.emit();
        },
        error: (err) => {
          // 错误处理
        }
      });
    }
  }
}

2. 在父组件的模板里监听这个事件，并调用刷新方法：

<!-- 父组件模板 -->
<app-save-tax (taxSaved)="refreshTaxTable()"></app-save-tax>
<sa-datatable #taxTable [options]="tableOptions"></sa-datatable>

3. 父组件里实现刷新逻辑（和场景1的refreshDatatable方法一样）：

import { Component, OnInit, ViewChild } from '@angular/core';
import { DatatableComponent } from '@smartadmin/datatable';
// 其他导入...

@Component({
  selector: 'app-tax-list',
  templateUrl: './tax-list.component.html'
})
export class TaxListComponent implements OnInit {
  @ViewChild('taxTable') taxTable: DatatableComponent;
  tableOptions: DataTables.Settings = { /* 你的表格配置 */ };

  constructor() {}

  ngOnInit(): void {}

  refreshTaxTable(): void {
    if (this.taxTable?.dtInstance) {
      this.taxTable.dtInstance.then((dtInstance) => {
        dtInstance.ajax.reload();
      });
    }
  }
}

注意事项 #

• 确保你的Smartadmin表格组件版本正确，有些版本可能用SaDatatableComponent作为组件类名，导入时要对应调整。
• 如果你的表格不是用DataTables的ajax加载数据，而是通过Angular HTTP请求手动获取后绑定的，那直接重新调用数据获取方法更新数据源即可，不需要用ajax.reload()。

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