Angular Datables - получить значения из datatables

Question

Я использую Angular 5 и Angular Datatables

OK Это фрагмент кода с объяснениями, потому что он сложный.

Я получаю данные со следующей структурой:

Массив следующих предметов

- count
- data
----- datarows
----- footerRow
----- headerRow
- service

пример:

Цель состоит в том, чтобы отобразить данные в различных таблицах данных, подобных этой (один элемент в таблице данных):

Данные хранятся в переменной listServices: listServices: Stats [] = []; где Stats составлен так:

export interface Stats {
  'data': DataTable [];
  'service': string;
  'count': number;
}
export interface DataTable {
  headerRow: string[];
  footerRow: string[];
  dataRows: string[][];
}

Работает, как вы видите.

Вот мой HTML:

  <div class="col-md-6" *ngFor="let services of listServices">
    <div class="card" *ngFor="let dataTable of services.data">
      <div class="card-header card-header-icon" data-background-color="green">
        {{services.count}}
      </div>
      <div class="card-content">
        <h4 class="card-title">
          {{services.service}}
        </h4>
        <div class="material-datatables table-responsive">
          <table datatable [dtOptions]="dtOptions" class="table table-striped table-no-bordered table-hover" cellspacing="0" width="100%" style="width:100%">
            <thead>
            <tr>
              <th style="width: 1%">
                <mat-checkbox (change)="$event ? masterToggle(dataTable.dataRows) : null"
                                [checked]="selection.hasValue() && isAllSelected(dataTable.dataRows.length)"
                                (click)="test()">
                </mat-checkbox>
              </th>
              <th>{{ dataTable.headerRow[1] }}</th>
              <th>{{ dataTable.headerRow[2] }}</th>
              <th>{{ dataTable.headerRow[3] }}</th>
              <th class="disabled-sorting text-right">Action</th>
            </tr>
            </thead>
            <tfoot>
            <tr>
              <th>Sélection</th>
              <th>{{ dataTable.footerRow[1] }}</th>
              <th>{{ dataTable.footerRow[2] }}</th>
              <th>{{ dataTable.footerRow[3] }}</th>
              <th class="text-right">Action</th>
            </tr>
            </tfoot>
            <tbody>
            <tr *ngFor="let row of dataTable.dataRows">
              <td>
                <mat-checkbox (click)="$event.stopPropagation()"
                                 (change)="$event ? selection.toggle(row) : null"
                                 [checked]="selection.isSelected(row)">
                </mat-checkbox>
              </td>
              <!--<td>{{row[0]}}</td>-->
              <td>{{row[1]}}</td>
              <td>{{row[2]}}</td>
              <td>{{row[3]}}</td>
              <td class="text-right">
                <button (click)="openIndex(row)" class="btn btn-simple btn-info btn-icon"  matTooltip="Indexer" [matTooltipPosition]="'left'">
                  <i class="material-icons">assignment</i>
                </button>
                <button (click)="onSubmitDel(row)" class="btn btn-simple btn-danger btn-icon"  matTooltip="Supprimer" [matTooltipPosition]="'right'">
                  <i class="material-icons">delete</i>
                </button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

Итак, для управления всеми моими таблицами данных у меня есть одна конфигурация:

ngOnInit() {
    const that = this;
    console.log('DashboardComponent - ngOnInit()');
    this.dtOptions = {
      pagingType: 'full_numbers',
      lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'Tous']],
      responsive: true,
      language: {
        lengthMenu: '    Afficher _MENU_ documents par page',
        zeroRecords: 'Aucune tâche disponible',
        info: 'Page _PAGE_ sur _PAGES_',
        infoEmpty: 'Aucun enre disponible',
        infoFiltered: ' (filtré(s) sur _MAX_ enregistrements)',
        paginate: {
          first:      '<<',
          last:       '>>',
          next:       '>',
          previous:   '<'
        },
        search: '_INPUT_',
        searchPlaceholder: 'Recherche',
      },
      stateSave: true,
      order: [[1, 'desc']],
      // Declare the use of the extension in the dom parameter
      dom: 'Blfrtip',
      select: true,
      columnDefs: [
        { targets: 3 ,
          visible: false,
          searchable: false
        }
      ],
      // Configure the buttons
      buttons: [
        {
          text: '<i class="material-icons">delete</i>',
          className: 'btn btn-danger btn-round',
          action: function (e, dt, node, config) {
            that.filterLists(dt);
          }
        },
        {
          text: 'Validation',
          className: 'btn btn-primary btn-round',
          // className: 'table-button button btn btn-primary',
          action: function (e, dt, node, config) {
            that.filterLists(dt);
            that.indexAllDoc(that.finalEltList);
          }
        },
      ]
    };
  }

но у меня 2 проблемы:

во-первых, я не могу скрыть третий столбец "Id" (проблема синхронизации с загрузкой данных ??)

второй: У меня есть много переменных, таких как «service», «datatable» или «datarows», как вы можете видеть в моем HTML-файле, и я не знаю, как получить их значения, когда я нажимаю кнопку «Проверка». Я знаю только, как извлечь значения таблицы «Дата», «Описание» и «Идентификатор» с помощью dt.buttons.exportData (). Body

Обе проблемы связаны: я должен получить абсолютно «id» значение, чтобы оно не отображалось на экране, но либо «visible = false» не работает (но «доступно для поиска», да), либо, если я решу удалить эту информацию из моего HTML я не могу найти, как получить значение «datarows», которое содержит все «id» ......