Может кто-нибудь, пожалуйста, решить эту проблему?

Question

Пожалуйста, кто-нибудь, помогите здесь.Таблица данных, показывающая «Нет данных в таблице». Я просто попытался внедрить этот замечательный плагин в свой проект.Это выглядит действительно потрясающе.Однако «Данные недоступны в таблице» по-прежнему появляется после загрузки данных таблицы и после попытки сортировки столбца, все данные исчезли.

import { Component,ViewChild, ElementRef, OnInit} from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { GroupService } from './Service/group.service';
import { NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { IGroup } from './Models/Groups';
declare var $;

@Component({
  selector: 'app-master-group',
  templateUrl: './master-group.component.html',
  styleUrls: ['./master-group.component.scss']
})
export class MasterGroupComponent implements OnInit {

  title = 'ATMS';
  @ViewChild('dataTable') table;
  dataTable: any;
  dtOptions: any;

  constructor(http: HttpClient, private _groupService : GroupService, 
    private toastr : ToastrService) {

   }

  ngOnInit() {

      this.resetForm();
     this.dtOptions = this._groupService.getGroup();
     this.dataTable = $(this.table.nativeElement);
     this.dataTable.DataTable(this.dtOptions);
  }

  resetForm(form?:NgForm){
    if(form!=null)
      form.resetForm();
      this._groupService.formData = {
        groupId: 0,
        groupName: '',
        isActive: false,
        createdBy: '',
        createdOn: null,
        modifiedBy: '',
        modifiedOn: null,
        timestamp: ''
      }
  }


  onSubmit(form: NgForm){
    if(form.value.groupId == 0)
    this.insertReord(form);
    else
    this.updateReord(form);
  }

  insertReord(form: NgForm){
    this._groupService.postGroup(form.value).subscribe(response=> {
      this.toastr.success('Record inserted successfully !', 'ATMS 3.0');
      this.resetForm(form);
      this._groupService.getGroup();
    })
  }

  populateGroupDetails(g:IGroup){
    this._groupService.formData = Object.assign({},g);
  }

  updateReord(form: NgForm){
    this._groupService.putGroup(form.value).subscribe(response=> {
      this.toastr.info('Record updated successfully !', 'ATMS 3.0');
      this.resetForm(form);
      this._groupService.getGroup();
    });
  }

  onDelete(id:number){
      if(confirm('Are you sure to delete this record?')){
      this._groupService.deleteGroup(id).subscribe(response =>{
        this.toastr.warning('Data Deleted successfully !','ATMS 3.0');
        this._groupService.getGroup();
      });
    }
  }

}


I want to data should be display properly with paging, searching, sorting and filtering.

 <table  #dataTable class="table table-sm table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Is Active</th>
                                        <th>Group</th>
                                        <th>Created By</th>
                                        <th>Created On</th>
                                        <th>Last Modification</th>
                                        <th>Action(s)</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <tr *ngFor='let g of _groupService.list'>
                                      <td>{{g.groupId}}</td>
                                      <td><label style="visibility: hidden;">{{g.isActive}}</label><i class="intelicon-filled-box text-success" style="font-size: 20px;"></i>
                                      </td>
                                      <td>{{g.groupName}}</td>
                                      <td>{{g.createdBy}}</td>
                                      <td>{{g.createdOn | date }}</td>
                                      <td>{{g.modifiedOn | date }}</td>
                                      <td><button (click)="populateGroupDetails(g)" class="invisible-button" ><i class="intelicon-compose" style="font-size: 16px; color:#00AEEF;"></i></button>
                                        <button (click)="onDelete(g.groupId)" class="invisible-button" ><i class="intelicon-trash-outlined" style="font-size: 16px; color:#ED1C24;"></i></button> </td>
                                </tr>
                                </tbody>
                            </table>