Datatable saying “No data available in table” even though there is data in the table in angular

Question

Actaully I have the data that are fetched through api and are being displayed in datatable in angular.I need to show the two tables in same html page so I have used two datatables but in one of those table I get "No data available in table". If i use single table then there is not this problem.

component.ts file

    constructor(private http: HttpClient,private assignmentAuditService: AssignmentAuditService,private selectionService: SelectionService,
            private chRef: ChangeDetectorRef, private chRef1: ChangeDetectorRef,
            private authService:LoginAuthService,private auditGroupService:AuditGroupService) {
            this.authService.isLoggedIn();

               }

          ngOnInit() {

           this.http.get('http://localhost:8080/api/auditgroup')
              .subscribe((data: any[]) => {
                this.auditorgroups = data;
                console.log(this.auditorgroups);
              });

         //i have called the api to load data into datatable here    this.http.get
('http://localhost:8080/api/selections/getAllNonAuditGroupSelections')
              .subscribe((data: any[]) => {
                this.clients = data;
                console.log(this.clients);

                // You'll have to wait that changeDetection occurs and projects data into 
                // the HTML template, you can ask Angular to that for you ;-)
                this.chRef.detectChanges();

                // Now you can use jQuery DataTables :
                const table: any = $('table');
                this.dataTable = table.DataTable();
              });

              /* for auditgroup selecitonm */

        //i have called the api to load data into datatable here  
     this.http.get('http://localhost:8080/api/selections/getAllAuditGroupSelections')
              .subscribe((datas: any[]) => {
                this.nonAuditSelection = datas;
                console.log(this.nonAuditSelection);

                // You'll have to wait that changeDetection occurs and projects data into 
                // the HTML template, you can ask Angular to that for you ;-)
                this.chRef1.detectChanges();

                // Now you can use jQuery DataTables :
                const table: any = $('table');
                this.dataTable = table.DataTable();
              });

          }

html to display table

<h5>Selection Without Audit Group</h5>
    <div class="card-body">

      <div class="col-md-12">
        <table class="table table-bodered">

          <thead>
            <tr>
              <th>Selection No</th>
              <th>SelectionDate</th>
              <th> SelectedBy</th>
              <th>PanEximNumber</th>
              <th>Name</th>
              <th>Address</th>
              <th>PhoneNumber</th>
              <th>SelectionType</th>
              <!-- <th>Action</th> -->

            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let client of clients" (click)="onClick(client)">
              <td  [ngStyle]="getStyle(this.client)">{{client.selectionId}}</td>
              <!--*ngIf="!client.auditorGroup" [ngClass]="{'myclass2': client.auditorGroup,  'myclass1': !client.auditorGroup}"-->
              <td [ngStyle]="getStyle(this.client)">{{client.selectionDate}}</td>
              <td [ngStyle]="getStyle(this.client)">{{client.selectedBy}}</td>
              <td [ngStyle]="getStyle(this.client)">{{client.panEximNumber}}</td>
              <td [ngStyle]="getStyle(this.client)">{{client.name}}</td>
              <td>{{client.address}}</td>
              <td>{{client.phoneNumber}}</td>
              <td>{{client.selectionType}}</td>
             <!--  <td *ngIf="!client.auditorGroup" [ngStyle]="getStyle(this.client)">Edit
              Delete</td> -->

            </tr>


          </tbody>

        </table>
      </div>
    </div>

     <div class="card-body">

      <div class="col-md-12">
        <table class="table table-bodered">

          <thead>
            <tr>
              <th>Selection No</th>
              <th>SelectionDate</th>
              <th> SelectedBy</th>
              <th>PanEximNumber</th>
              <th>Name</th>
              <th>Address</th>
              <th>PhoneNumber</th>
              <th>SelectionType</th>
              <!-- <th>Action</th> -->

            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let nonAudit of nonAuditSelection">
              <td>{{nonAudit.selectionId}}</td>
              <!--*ngIf="!client.auditorGroup" [ngClass]="{'myclass2': client.auditorGroup,  'myclass1': !client.auditorGroup}"-->
              <td>{{nonAudit.selectionDate}}</td>
              <td>{{nonAudit.selectedBy}}</td>
              <td>{{nonAudit.panEximNumber}}</td>
              <td>{{nonAudit.name}}</td>
              <td>{{nonAudit.address}}</td>
              <td>{{nonAudit.phoneNumber}}</td>
              <td>{{nonAudit.selectionType}}</td>
             <!--  <td *ngIf="!client.auditorGroup" [ngStyle]="getStyle(this.client)">Edit
              Delete</td> -->

            </tr>


          </tbody>

        </table>
      </div>
    </div>

Table is diplayed as :

The api datas are coming right as here is no problem :

Answer 1

The issue is with the jQuery selector you are using, try this:

1. Add id to each table as below:

   <table id="table1" class="table table-bodered">

   <table id="table2" class="table table-bodered">

2. In your .ts change selector as below for the relevant api data to show:

   const table: any = $('#table1');

   const table: any = $('#table2');

Currently, as you are always selecting a table: $('table) jquery selects one table and renders data to it. Hope it helps.