angular-datatables в angular 6, проблема выравнивания вложенных строк и dtOptions не загружаются

Question

  dtOptions = {
    pagingType: 'full_numbers',
    pageLength: 5,
    processing: true
  };
  mainData = [
    {'plus':'','ID':1,'FName':'AAA','SName':'A','Place':'ID'},
    {'plus':'','ID':2,'FName':'BBB','SName':'B','Place':'SG'},
    {'plus':'','ID':3,'FName':'CCC','SName':'C','Place':'HK'},
    {'plus':'','ID':4,'FName':'DDD','SName':'D','Place':'CN'}
  ];
  getRow(row){
    console.log("data",row);
    row.expand = true;
  }

Я создаю таблицу с помощью angular-datatables в Angular 6. Я пытаюсь использовать вложенные таблицы, например, показывать другую таблицу при развертывании td. Но расширенная строка всегда добавляется вверху строк основной таблицы.

Но я хочу показать вложенную таблицу при развертывании определенной строки, как показано ниже каждой строки.
похоже вот так https://stackblitz.com/edit/how-to-create-drill-down-tables-using-this-library-1240. прикрепление скриншотов для справки. Пожалуйста, подскажите, чего мне не хватает.

Если я добавляю вот так

1.  <tbody>
                 <ng-template ngFor let-row [ngForOf]="mainData" let-i="index">
                     <tr class="sub_{{i}}">
                         <td (click)="getRow(row)">
                           <i class="fa fa-plus" *ngIf="!row.expand"></i>
                           <i class="fa fa-minus" *ngIf="row.expand"></i>
                         </td>
                         <td>{{row.ID}}</td>
                         <td>{{row.FName}}</td>
                         <td>{{row.SName}}</td>
                         <td>{{row.Place}}</td>
                       </tr>
                       <tr></tr>
                       <tr class="sub_{{i}} secondrow" *ngIf="row.expand">
                           <table datatable [dtOptions]="dtOptions" class="table table-striped">
                             <thead>
                               <tr>
                                 <th>ID</th>
                                 <th>Name</th>
                               </tr>
                             </thead>
                             <tbody>
                               <tr>
                                 <td>1</td>
                                 <td>SSS</td>
                               </tr>
                             </tbody>
                           </table>
                       </tr>
                 </ng-template>  
             </tbody>

---

вложенная строка находится точно под строкой, но dtOptions основной таблицы не загружается.

Спасибо

  <div class="row" style="margin:0px;">
  <div class="col-md-12"><h6>Nested Table</h6></div>
  <div class="col-md-12">
      <table datatable [dtOptions]="dtOptions" class="table table-striped">
          <thead>
            <tr>
              <td></td>
              <td>ID</td>
              <td>First Name</td>
              <td>Last Name</td>
              <td>Place</td>
            </tr>
          </thead>
          <tbody>
              <ng-template ngFor let-row [ngForOf]="mainData" let-i="index">
                  <tr class="sub_{{i}}">
                      <td (click)="getRow(row)"><i class="fa fa-plus"></i></td>
                      <td>{{row.ID}}</td>
                      <td>{{row.FName}}</td>
                      <td>{{row.SName}}</td>
                      <td>{{row.Place}}</td>
                    </tr>
                    <tr class="sub_{{i}} secondrow" *ngIf="row.expand">
                        <table datatable [dtOptions]="dtOptions" class="table table-striped">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>SSS</td>
                            </tr>
                          </tbody>
                        </table>
                    </tr>
              </ng-template>  
          </tbody>
        </table>
  </div>
</div>

] 1

Answer 1

Проверьте это https://stackblitz.com/edit/how-to-create-drill-down-tables-using-this-library-1240-cqmh8n?file=app%2Fapp.component.html

TS:

import { Component, VERSION, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  version = 'Angular: v' + VERSION.full;
  dtOptions: DataTables.Settings = {};
  mainData = [];
  table;

  @ViewChild(DataTableDirective)
  private datatableElement: DataTableDirective;

  constructor() { }

  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 5,
      processing: true
    };
    this.mainData = [
      { 'plus': '', 'ID': 1, 'FName': 'AAA', 'SName': 'A', 'Place': 'ID' },
      { 'plus': '', 'ID': 2, 'FName': 'BBB', 'SName': 'B', 'Place': 'SG' },
      { 'plus': '', 'ID': 3, 'FName': 'CCC', 'SName': 'C', 'Place': 'HK' },
      { 'plus': '', 'ID': 4, 'FName': 'DDD', 'SName': 'D', 'Place': 'CN' },
      { 'plus': '', 'ID': 2, 'FName': 'BBB', 'SName': 'B', 'Place': 'SG' },
      { 'plus': '', 'ID': 3, 'FName': 'CCC', 'SName': 'C', 'Place': 'HK' },
      { 'plus': '', 'ID': 4, 'FName': 'DDD', 'SName': 'D', 'Place': 'CN' }
    ];

  }

  ngAfterViewInit() {
    this.datatableElement.dtInstance.then(table => {
      console.log(table);
      this.table = table
    });
  }

  addChildTable(rowInstance) {
    const row = this.table.row(rowInstance);
    const data = this.table.row(rowInstance).data()
    console.log(data);
    if (row.child.isShown()) {
      // This row is already open - close it
      row.child.hide();
    }
    else {
      const childTable=this.getTable();
      row.child(childTable).show();
    }
  }

  getTable() {
    return `<table  class="table table-striped">
                          <thead>
                            <tr>
                              <th>ID</th>
                              <th>Name</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>1</td>
                              <td>SSS</td>
                            </tr>
                          </tbody>
                        </table>`
  }


}

HTML:

<div class="row" style="margin:0px;">
    <div class="col-md-12">
        <h6>Nested Table</h6>
    </div>
    <div class="col-md-12">
        <table datatable  class="table table-striped">
            <thead>
                <tr>
                    <td></td>
                    <td>ID</td>
                    <td>First Name</td>
                    <td>Last Name</td>
                    <td>Place</td>
                </tr>
            </thead>
            <tbody>
                <ng-container *ngFor="let row of mainData;let i = index">
                    <tr #rowInstance>
            <td (click)=addChildTable(rowInstance)><i class="fa fa-plus"></i></td>
                        <td>{{row.ID}}</td>
                        <td>{{row.FName}}</td>
                        <td>{{row.SName}}</td>
                        <td>{{row.Place}}</td>

                    </tr>
                </ng-container>
            </tbody>
        </table>
    </div>
</div>