Angular Datatable 更新的数据在导出/排序/搜索时消失答案

【问题标题】：Angular Datatable updated data disappear upon export/sort/searchAngular Datatable 更新的数据在导出/排序/搜索时消失
【发布时间】：2021-04-17 22:29:20
【问题描述】：

在角度数据表方面，我还是个新手。我的页面在表格中显示品种，并且可以将只读输入切换为可编辑字段并删除条目。我还希望将这些数据导出为 excel 或 pdf。我面临的问题是，在我编辑或删除之后（在更改数据库中值的 API 调用之后）屏幕上的表中的数据发生了变化，但是在导出（excel 或 pdf）时它没有更新，这意味着只有首次加载页面时的初始数据在导出时保留...
它的工作方式：一个图标使用户能够编辑 -> 用户编辑然后确认 -> 通过此模块的服务进行 API 调用 -> 数据更改 -> Excel/Pdf 导出仍然具有与以前相同的数据
HTML

<table datatable [dtOptions]="dtExportButtonOptions" class="table table-bordered table-striped mb-0">
            <thead>
                <tr>
                    <th class="text-center">Breed Name</th>
                    <th class="text-center">Options</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let breed of BREEDS">
                    <td class="text-center">
                        <input class="form-control" type="text" placeholder="Insert Breed Name"
                            [(ngModel)]="breed.BREED_NAME" [readonly]="!breed.Edit">
                        <span style="display: none;" >{{breed.BREED_NAME}}</span>
                    </td>

                    <td class="text-center">
                        <div class="row align-items-center m-l-0">
                            <div class="col-sm-6 text-right">
                                <button *ngIf="!breed.Edit" type="button" class="btn btn-icon btn-outline-info mr-2"
                                    (click)="ToggleEdit(breed)"><i class="feather icon-edit-2"></i></button>
                                <button *ngIf="breed.Edit" type="button" class="btn btn-icon btn-outline-success mr-2"
                                    (click)="EditBreed(breed)"><i class="feather icon-check-circle"></i></button>
                            </div>
                            <div class="col-sm-6 text-left">
                                <button *ngIf="!breed.Edit" type="button" class="btn  btn-icon btn-outline-danger"
                                    (click)="OpenDeleteModal(breed)"><i class="feather icon-trash-2"></i></button>
                                <button *ngIf="breed.Edit" type="button" class="btn  btn-icon btn-outline-danger"
                                    (click)="ToggleEdit(breed)"><i class="feather icon-slash"></i></button>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

类型脚本

addCusForm: FormGroup;
  dtExportButtonOptions: any = {};
  DeletedBreed: Breed;
  _params_EditBreed: Breed = new Breed();
  _params_DeleteBreed: Params_Delete_Breed = new Params_Delete_Breed();
constructor(
    private proxy: Proxy,
    private fb: FormBuilder,
    private CmSvc: CommonService,
    private GSSVC: GeneralsetService
  ) { }

  ngOnInit(): void {
    this.addCusForm = this.fb.group({
      BREED_ID: [-1],
      OWNER_ID: [1],
      BREED_NAME: [, [Validators.required]],
    });

    var buttonCommon = {
      exportOptions: {
        // format: {
        //   body: function (data, row, column, node) {
        //     return node.firstChild.tagName === "INPUT" ?
        //       node.firstElementChild.value :
        //       data;
        //   }
        // },
        columns: [0],
      }
    };

    this.dtExportButtonOptions = {
      dom: 'Bfrtip',
      buttons: [
        $.extend(true, {}, buttonCommon, {
          extend: 'copyHtml5'
        }),
        $.extend(true, {}, buttonCommon, {
          extend: 'excelHtml5',
          titleAttr: 'Export to Excel',
        }),
        $.extend(true, {}, buttonCommon, {
          extend: 'print',
          titleAttr: 'Print',
        }),
      ]
    };
  }
ToggleEdit(breed) {
    breed.Edit = !breed.Edit;
  }

  EditBreed(breed: Breed) {
    if (breed.BREED_NAME.length > 0) {
      this._params_EditBreed = breed;
      console.log(this._params_EditBreed);

      this.proxy.Edit_Breed(this._params_EditBreed).subscribe((result) => {
        if (result) {
          this.CmSvc.ShowMessage('Breed ' + this._params_EditBreed.BREED_NAME + ' has been successfully Updated.',
            3500);
          this.addCusForm.get('BREED_NAME').reset();
          this.GSSVC.resolve();
        }
      });
      this.ToggleEdit(breed);
    }
  }

  SubmitBreed() {
    if (this.addCusForm.valid) {
      this._params_EditBreed = this.addCusForm.getRawValue() as Breed;
      console.log(this._params_EditBreed);

      this.proxy.Edit_Breed(this._params_EditBreed).subscribe((result) => {
        if (result) {
          this.CmSvc.ShowMessage('Breed ' + this._params_EditBreed.BREED_NAME + ' has been successfully submitted.',
            3500);
          this.addCusForm.get('BREED_NAME').reset();
          this.GSSVC.resolve();
        }
      });
    }
  }

DeleteBreed() {
    this._params_DeleteBreed.BREED_ID = this.DeletedBreed.BREED_ID;
    this.proxy.Delete_Breed(this._params_DeleteBreed).subscribe((result) => {
      if (!result) {
        this.CmSvc.ShowMessage(
          'Breed ' + this.DeletedBreed.BREED_NAME + ' has been successfully removed.',
          3500
        );
        this.modalDelete.hide();
        this.DeletedBreed = null;
        //this.ToggleEdit(breed);
        this.GSSVC.resolve();
      }
    })
  }

!!您可能会注意到我在 HTML 表格中有一个隐藏的跨度。我这样做是因为输入字段没有显示在表格中，所以我读到这是一个周转解决方案。我尝试了另一种解决方案，您将在 TypeScript 文件中看到该解决方案的注释，但这并不能让我整理列或搜索。
这是一个“不工作”的 stackblitz 链接，可以更好地了解整个架构：https://stackblitz.com/edit/angular-bppwap?embed=1&file=src/app/hello.component.html
我希望我提供的足够多，并提前感谢您的帮助。

【问题讨论】：

这里有很多代码。我希望它可以减少/简化并仍然显示问题。话虽如此，要对 DataTable 进行更改，您必须使用 DataTables API。将数据添加到 HTML（到 DOM）不会有任何影响 - DataTables 只会导出它知道的数据。（或者，您必须自定义 DataTables PDF/Excel 导出。关于这样做有各种各样的问题。）

标签： angular typescript datatables angular-datatables

【解决方案1】：

要更新 Angular DataTable 数据，您应该在表格上放置 dtTrigger 并在必须重新加载数据时调用 next()：

<table datatable 
[dtOptions]="dtExportButtonOptions" 
[dtTrigger]="dtTrigger" 
class="table table-bordered table-striped mb-0">

import { Subject } from 'rxjs';
import { DataTableDirective } from 'angular-datatables';

---

  dtTrigger: Subject<any> = new Subject<any>();
  @ViewChild(DataTableDirective, { static: false })
  dtElement: DataTableDirective;

 // Call this method to reaload the data
 reRender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });
  }

【讨论】：

我应用了您提交的内容，我应该调用 reRender OnInit 还是什么？因为在加载页面时，导出按钮和排序没有出现在表格上。当我在 init 上调用它时，它显示 dtElement 未定义。而在执行我的 API 请求后调用它时，它会显示“无法读取未定义的属性 'then'”
我添加了 this.dtTrigger.next();在 ngAfterViewInit 中，现在显示导出按钮。但剩下的问题是，我修改数据后，表格只考虑初始数据。我添加了一个新项目 => 该项目连续出现 => 如果我尝试打印它不会出现在列表中 => 我单击了一个触发 reRender 功能的按钮 => 添加的项目从表中消失了
我终于解决了这个问题，很快就会发布解决方案。

【解决方案2】：

我确实使用了 Maria 提供的 reRender 功能，但仅此还不够。首先，我将获取数据的 API 函数从父组件移到了子组件，因为我需要在获取数据时激活 reRender 函数。（我也可以使用 @ViewChild 从父组件激活它，但这只是为了简单起见。

首先要添加的东西

ngAfterViewInit(): void {
    this.dtTrigger.next();
    this.isfirst = false;
  }

isfirst 标志用于区分是否是第一次加载页面，因为重新渲染 onInit 会引发错误。

下面是reRender函数

reRender(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      // Destroy the table first
      dtInstance.destroy();
      // Call the dtTrigger to rerender again
      this.dtTrigger.next();
    });
  }

这就是检索数据时发生的情况

this.GSSVC.onDog_breedChange
      .pipe(takeUntil(this._unsubscribAll)).subscribe(breed => {
        if (breed) {
          this.BREEDS = breed;
          if (this.BREEDS.length === 0) {
            this.EmptyData = true;
          }
          else {
            this.EmptyData = false;
          }
          if (!this.isfirst)
            this.reRender();
        }
      });

同样重要的是要注意我在 table 标记上有一个 ngIf 标志，以防传入数据为空。这会引发一些错误，当我从表中删除所有内容然后尝试添加一个条目时显示，因此要么删除 ngIf 要么替换为 [hidden]。

【讨论】：