数据表即使填满数据仍然显示无数据

Question

我正在将数据填充到一个表中，即使有超过 10 行，它仍然显示

表格中没有可用数据

我尝试了堆栈中提供的不同解决方案，但都没有奏效。

https://datatables.net/forums/discussion/38174/no-data-available-in-table-still-appears-after-rows-are-loaded-data-disappears-on-column-sorted

Data table is showing no data available in table using Angular

我的代码在下面，任何帮助将不胜感激。

    this.detailsService.getJobDetails(this.jobId).subscribe(data => {
      this.assetsList = data;
      if (this.jobDetails.status === "Queued") {
        this.jobRunning = true;
        this.jobExpired = false;
      } else {
        this.jobRunning = false;
        this.jobExpired = true;
      }

      this.startTime = this.timeStamptoTime(this.jobDetails.startTime);
      this.endTime = this.timeStamptoTime(this.jobDetails.endTime);
    });

              <table id="user-table" datatable [dtOptions]="dtOptions" class="row-border hover">
                <thead>
                  <tr>
                    <th>Asset Id</th>
                    <th>Title</th>
                    <th>Status</th>
                    <th>Updated</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let item of assetsList">
                    <td class="ellipsis" title="item.id">{{ item.id }}</td>
                    <td class="ellipsis-name">{{ item.title }}</td>
                    <td [ngStyle]="{ color: colorStatus }">
                      {{ item.status }}
                    </td>
                    <td>{{ timeStamptoDateTime(item.startTime) }}</td>
                    <td>Re-Injest</td>
                  </tr>
                </tbody>
              </table>

我在服务错误时使用了 ChangeDetectorRef，但它也无法正常工作。

[{"id":"20d2063c-58e3-4391-9971-a7c9bfd6cc66","guid":"2ABs0qlpwoZj","title":"Georgia","type":"MOVIE","description":null,"startTime":1557906022212,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"4e409f42-177c-4b0e-a6d7-d3459d2b1a60","guid":"r9wjARFp5ybo","title":"Dead Man Walking","type":"MOVIE","description":null,"startTime":1557906028718,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"ca279d00-3a07-48ae-8ff3-efd524060059","guid":"zIVqvJQ80lmE","title":"Taxi Driver","type":"MOVIE","description":null,"startTime":1557906031223,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"63aca7dc-17ba-4f4f-a75a-e6667b3e03dc","guid":"OYv845bmL0yA","title":"Unforgettable","type":"MOVIE","description":null,"startTime":1557906034716,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"5717d61c-e8dd-4e30-b02e-42c73aa56ff7","guid":"QHbHU1LRNjTQ","title":"GoldenEye","type":"MOVIE","description":null,"startTime":1557906043909,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"555de673-88de-4911-8418-600e39253f08","guid":"A4no5EdT4i69","title":"It Takes Two","type":"MOVIE","description":null,"startTime":1557906065093,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"b17e412e-5438-450d-8a2d-2f3414c103d5","guid":"hQ1j4MYyyFZA","title":"Sabrina","type":"MOVIE","description":null,"startTime":1557906067911,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"4ec72565-72eb-4348-a985-b457ae5318ad","guid":"5glGh59h45IJ","title":"The American President","type":"MOVIE","description":null,"startTime":1557906070579,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"c611ed9e-2c27-4795-8317-639037753090","guid":"MZgULmywtVQR","title":"Kids of the Round Table","type":"MOVIE","description":null,"startTime":1557906073218,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"a36ef9f8-3154-470e-ac3e-5de68692e026","guid":"itGULjm1tWf9","title":"Across the Sea of Time","type":"MOVIE","description":null,"startTime":1557906076013,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"fd444ae6-722d-4959-becf-34417bd0f282","guid":"Ii5YffceXL2n","title":"Don't Be a Menace to South Central While Drinking Your Juice in the Hood","type":"MOVIE","description":null,"startTime":1557906078785,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null},{"id":"6074d7c1-a420-45dc-8418-9b3ea20e5bee","guid":"ruPJj6svK7YK","title":"White Squall","type":"MOVIE","description":null,"startTime":1557906082274,"duration":null,"status":"Completed","streamoneId":null,"published":false,"error":null}]

Answer 1

试试这个：

填充数据后添加this.dtTrigger.next()

dtTrigger: any = new Subject();

this.detailsService.getJobDetails(this.jobId).subscribe(data => {
  this.assetsList = data;
  this.dtTrigger.next();
  ...
});