Question

实际上，我有通过api提取的数据，并以angular。的形式显示在数据表中。我需要在同一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选择器有关，请尝试以下操作：

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

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

<table id="table2" class="table table-bodered">
在.ts更改选择器中，如下所示显示相关的api数据：

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

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

当前，就像您一直在选择表一样：$('table) jquery选择一个表并将数据呈现到该表。希望对您有所帮助。

数据表显示“表中没有数据”，即使表中的数据成角度

1 个答案: