重新排序Angular数据表的列后如何获取当前状态数组答案

【问题标题】：How to get the current state array after re-ordering the columns of Angular datatables重新排序Angular数据表的列后如何获取当前状态数组
【发布时间】：2022-01-16 06:49:22
【问题描述】：

这是一个有趣的案例，当我使用纯 JS + jQuery 时，我实现了获取列数组的当前状态，但是当尝试在 Angular 12 中实现相同的事情时，这将不起作用！我正在阅读 Angular 数据表的文档以及 datatables.net 但这对项目不起作用！

这是我试图在 Angular 中设置的代码：

import { Component, OnInit, ViewChild } from '@angular/core';
declare var $:JQueryStatic;


@Component({
  selector: 'app-mandant',
  templateUrl: './mandant.component.html',
  styleUrls: ['./mandant.component.scss']
})
export class MandantComponent implements OnInit {

  dtOptions = {};
  constructor() { }

  ngOnInit(): void {

    this.dtOptions = {
      dom: 'Bfrtip',
      bLengthChange: true,
      searching: false,
      table: "#dttable",
      info: true,
      buttons: [
        'colvis',
        'copy',
        'print',
        'excel',
        {
          text: 'Some button',
          key: '1',
          action: function (e: any, dt: any, node: any, config: any) {
            alert('Button activated');
          }
        }
      ],
      colReorder: {
        enable: true,
        order: [1, 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
      }
    };

    this.dtOptions.on('column-reorder.dt', function (e, settings, details) {
      console.log("You just reordered the cols, here is your current state: ", this.dtOptions.order());
    });
  }

  ngAfterViewInit(): void {
    
  }
}

对我来说的成就是这段代码，如果这段代码在每次更改列后返回数组的当前状态，我的担心就完成了：

this.dtOptions.on('column-reorder.dt', function (e, settings, details) {
      console.log("You just reordered the cols, here is your current state: ", this.dtOptions.order());
    });

【问题讨论】：

当你认为 dtoptions.on 方法被调用时？
问题是这个方法永远不会被调用！我希望在您发布专栏后立即调用它。
我想我已经找到了解决这个问题的办法。
@GRD 我全神贯注 :)
嘿@GRD 对不起，我找到了解决方案，但是如果我能帮助你，我会做的:)。告诉我你的情况！？

标签： javascript jquery angular datatables

【解决方案1】：

几天后我找到了解决方案，我试图在 ngViewInit(); 上加载所有内容，但实际上我必须在 ngAfterViewInit(); 上这样做：

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

@Component({
  selector: 'app-mandant',
  templateUrl: './mandant.component.html',
  styleUrls: ['./mandant.component.scss']
})
export class MandantComponent implements OnInit, AfterViewInit {
  @ViewChild('dataTable', { static: false }) table: any;
  dtOptions: any;
  constructor() { }

  ngAfterViewInit(): void {
    var cols: any = localStorage.getItem("mandanten") === null ? null : JSON.parse(localStorage.getItem("mandanten") || "[]");
    this.dtOptions = {
      dom: "Bfrtip",
      "buttons": [
        "colvis",
        "copy",
        "excel"
      ],
      "colReorder": {
        "enable": true,
        "realtime": false,
        "order": cols,
      }
    };

    var table: any = $(this.table.nativeElement).DataTable(this.dtOptions);

    table.on("column-reorder", function () {
      localStorage.setItem("mandanten", JSON.stringify(table.colReorder.order()));
    });

    table.on( 'buttons-action', function ( e: any, buttonApi: any, dataTable: any, node: any, config: any ) {
      console.log(buttonApi.columns());
  } );
  };

  ngOnInit(): void { }
}

【讨论】：