Javascript 数据表上写着；表“中无可用数据”；即使表格中有角度的数据

实际上，我有通过api获取的数据，这些数据以角度显示在datatable中。我需要在同一html页面中显示这两个表，所以我使用了两个datatable，但在其中一个表中，我得到“表中没有可用数据”。如果我使用单表，那么就没有这个问题

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>

不带审核组的选择
选择号
选择日期
选择人
PanEximNumber
名称
地址
电话号码
选择类型
{{client.selectionId}
{{client.selectionDate}
{{client.selectedBy}
{{client.panEximNumber}
{{client.name}
{{client.address}
{{client.phoneNumber}
{{client.selectionType}
选择号
选择日期
选择人
PanEximNumber
名称
地址
电话号码
选择类型
{{nonAudit.selectionId}
{{nonAudit.selectionDate}
{{nonAudit.selectedBy}
{{nonAudit.panEximNumber}
{{nonAudit.name}
{{nonAudit.address}
{{nonAudit.phoneNumber}
{{nonAudit.selectionType}

表显示如下：

api数据正确无误，因为这里没有问题：

---

问题在于您使用的jQuery选择器，请尝试以下操作：

将

id

添加到每个表中，如下所示：

在.ts中，更改选择器，如下所示，以显示相关api数据：

const table:any=$（'#table1'）

const table:any=$（'#table2'）

---

当前，由于您总是选择一个表：

$（'table）

jquery选择一个表并将数据呈现给它。希望有帮助。

问题在于您使用的jQuery选择器，请尝试以下操作：

将

id

添加到每个表中，如下所示：

在.ts中，更改选择器，如下所示，以显示相关api数据：

const table:any=$（'#table1'）

const table:any=$（'#table2'）

---

当前，由于您总是选择一个表：

$（'table）

jquery选择一个表并将数据呈现给它。希望有帮助。

无法正确解决您的问题。。如图所示，我们可以看到两个表分别有两个单独的数据。。在表1中，您得到的是值，但除此之外，您得到的是表中的

无可用数据

对吗？是的，两个表中的值来自两个不同的api。在一个表中，它正确地显示了数据加上所有内容，但在另一个表中，它显示了表中无可用数据，从中，文本

否数据

是从api提交的，或者是您手动提供的？？任何jquery都不会检测到值的数量并自动显示这些值，因此无法正确解决您的问题。。如图所示，我们可以看到两个表分别有两个单独的数据。。在表1中，您得到的是值，但除此之外，您得到的是表中的

无可用数据

对吗？是的，两个表中的值来自两个不同的api。在一个表中，它正确地显示了数据加上所有内容，但在另一个表中，它显示了表中无可用数据，从中，文本

否数据

是从api提交的，或者是您手动提供的？？任何jquery都不会检测到值的数量并自动显示它们