Невозможно использовать задачу Child Row в угловых данных - PullRequest
Новая
       24

Невозможно использовать задачу Child Row в угловых данных

0 голосов
/ 29 марта 2019

Я использую angular-datatable для отображения списка полученных данных.

Я хочу сделать строку расширяемой, чтобы выводить больше данных, вот так: https://l -lin.github.io / angular-datatables / # / extensions / responseive

моя проблема в том, что я использую 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()
    })
  }
}
...