Приводимое к данным высказывание «Нет данных в таблице», хотя в таблице имеются угловые данные

Question

На самом деле у меня есть данные, которые выбираются через API и отображаются в виде данных в угловом формате. Мне нужно показать две таблицы на одной HTML-странице, поэтому я использовал две таблицы данных, но в одной из этих таблиц я получаю «Нет данных доступно в таблице ". Если я использую одну таблицу, то это не проблема.

файл component.ts

    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 для отображения таблицы

<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>

Таблица отображается как:

Api-данные подходят, поскольку здесь нет проблем:

Answer 1

Проблема с селектором jQuery, который вы используете, попробуйте это:

1. Добавьте id к каждой таблице, как показано ниже:

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

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

2. В вашем .ts измените селектор, как показано ниже, для отображения соответствующих данных API:

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

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

В настоящее время, поскольку вы всегда выбираете таблицу: $('table) jquery выбирает одну таблицу и отображает в нее данные. Надеюсь, это поможет.