无法在角度数据表中使用子行问题

Question

我正在使用angular-datatable显示获取的数据列表。

我想使行可扩展以显示更多数据，如下所示：https://l-lin.github.io/angular-datatables/#/extensions/responsive

我的问题是我正在使用api来获取数据，并且给定的示例使用了ajax调用，所以我无法做到这一点

user.component.html

<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered table-sm row-border hover">
    <thead>
      <tr>
        <th>#</th>
        <th>User ID</th>
        <th>Permissions</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let data of dtPermissionData; let i=index'>
        <td>{{ i + 1 }}</td>
        <td>{{ data.user_id }}</td>
        <td *ngFor='let per of data.permissions'>{{ per | json }}</td>
        <td>
          <button class="btn btn-sm btn-primary">Edit</button>
          <button class="btn btn-sm btn-danger">Delete</button>
        </td>
      </tr>
    </tbody>
</table>

user.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { UserListingService } from '../user-listing.service';

import { HttpClient } from '@angular/common/http';
import Swal from 'sweetalert2';
import { DataTableDirective } from 'angular-datatables';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  model: any = {};

  @ViewChild(DataTableDirective)
  dtElement: DataTableDirective;
  dtOptions: any = {};  // DataTables.Settings =
  dtPermissionData = null
  dtTrigger: Subject<any> = new Subject();

  constructor(
    private userListingApi: UserListingService,
    private http: HttpClient
  ) { }

  ngOnInit() {
    this.fetchAllUserPermission()
  }

  fetchAllUserPermission() {
    this.userListingApi.fetchAllUserPermissionData().subscribe(res => {
      this.dtPermissionData = res
      this.dtTrigger.next()
    })
  }
}