Параметры dataTable не работают в угловых 6

Question

Я использую dataTables в угловых 6, идет нормально и отображает его как положено. но если я нажимаю pagination или изменяю длину страницы или что-то ищу, он не отправляет ни одного параметра с API, как это делает в jquery dataTable вот мой код

файл component.ts

import { Component, OnInit } from '@angular/core';
import { adminLteConf } from '../admin-lte.conf';
import {Http} from "@angular/http";
import { HttpClient, HttpResponse } from '@angular/common/http';

import { HttpHeaders } from '@angular/common/http';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-listmasterlog',
  templateUrl: './listmasterproducts.component.html',
  styleUrls: ['./listmasterproducts.component.css']
})
export class ListmasterproductsComponent implements OnInit {

  public data: any[];
  public filterQuery = "";
  public mfRowsOnPage = 10;
  public mfActivePage: any;
  public sortOrder = "asc";

  dtOptions: DataTables.Settings = {}; 
  metaData:any;


  constructor(private http: Http) { }

  ngOnInit(): void {
    this.dtOptions = {
      //pagingType: 'full_numbers',

      processing: true,
      serverSide: true,

      pageLength:10,
      language: {
        lengthMenu: "_MENU_",
        paginate: {
          first:'',
          last:'',
          next: '<i class="fa fa-chevron-circle-right">', // or '→'
          previous: '<i class="fa fa-chevron-circle-left">' // or '←' 
        }
      },
      dom: '<t><"bottom"p><"inline-flex" li><"clear">',
      ajax:(dataTablesParameters:any, callback) => {
        this.http.get(
          adminLteConf.APIURL+"?io=masterprod&action=list",
          dataTablesParameters
        ).subscribe(resp=> {
          var resposnse = resp.json();
          this.data = resposnse['data'];
          //console.log(this.packages);

          callback({
            recordsTotal: resposnse['meta'].total,
            recordsFiltered: resposnse['meta'].pages,
            data: []
          });
        });
      }
      // columns: [
      //   { data: "RecordId"}, {data: 'PackageName'}, {data: 'Price'}
      // ],
    };



  }

}

Это то, что я получаю в заголовке, когда проверяю секцию network внутри элемента inspect

http://example.com/webapi/?io=masterprod&action=list&value=&regex=false

Я гуглю его за последние три дня, но ничего не нашел.

Приведенное выше изображение с нумерацией таблиц отлично отображает поступающие данные, но их функциональность не работает. Каждый раз, когда я нажимаю на пагинацию или изменяю длину, которую ударил API, но без каких-либо параметров

Answer 1

Ну, я сделал некоторые изменения, и да, мой код работает. Это параметр передачи с URL. Ниже мой обновленный код, я заменил http.get на http.post, а также внес некоторые изменения для header

import { Component, OnDestroy, OnInit, ViewChild, AfterViewInit } from 

'@angular/core';
import { adminLteConf } from '../admin-lte.conf';
import {Http, RequestOptions, Headers} from "@angular/http";
import { HttpClient, HttpResponse, HttpHeaders } from '@angular/common/http';


import { DataTableDirective } from 'angular-datatables';

class DataTablesResponse {
  data: any[];
  draw: number;
  recordsFiltered: number;
  recordsTotal: number;
}


const ParseHeaders = {
  headers: new HttpHeaders({
   'Content-Type'  : 'application/x-www-form-urlencoded'
  })
 };


@Component({
  selector: 'app-listmasterlog',
  templateUrl: './listmasterproducts.component.html',
  styleUrls: ['./listmasterproducts.component.css']
})
export class ListmasterproductsComponent implements OnInit {
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;



  public masterprods: any[];
  public filterQuery = "";
  public mfRowsOnPage = 10;
  public mfActivePage: any;
  public sortOrder = "asc";
  public page :number;
  data : any[];
  dtOptions: DataTables.Settings = {}; 


  constructor(private http: HttpClient) { }

  ngOnInit(): void {

    this.dtOptions = {
      processing: true,
      serverSide: true,
      destroy:true,
      paging:true,
      ordering:true,
      //displayStart:2,
      pageLength:10,
      searchDelay: 2000,
      lengthChange:true,
      language: {
        lengthMenu: "_MENU_",
        paginate: {
          first:'',
          last:'',
          next: '<i class="fa fa-chevron-circle-right">', // or '→'
          previous: '<i class="fa fa-chevron-circle-left">' // or '←' 
        }
      },
      dom: '<t><"bottom"p><"inline-flex" li><"clear">',
      ajax:(dataTablesParameters:any, callback) => {

        this.http.post<DataTablesResponse>(
          "http://example.com/io=pro&action=lst",
          dataTablesParameters,ParseHeaders
        ).subscribe(resp=> {
          var resposnse = JSON.stringify(resp);
          var respsn = JSON.parse(resposnse);

          this.masterprods = respsn.data;

          callback({
            recordsTotal: respsn.meta['total'],
            recordsFiltered: respsn.meta['pages'],
            data: []
          });
        });
      },

    };

  }


}

Теперь я могу видеть в разделе сети все параметры, которые я хочу отправить

{"draw":1,"columns":[{"data":0,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":1,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":2,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":3,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":4,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":5,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":6,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":7,"name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}