使用 angular 9 无法正确加载数据表分页、搜索和排序

Question

我从服务文件中获取数组数据，我的问题出在我的数据中 table 数据绑定正确，但分页、搜索和排序正在 Dom 中加载。我已经评论了我的html，组件和服务文件请查看

.html

<table class="table table-striped" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
    <thead>
      <tr>
        <th>UNIQUE_ID</th>
        <th>ORGANISATION</th>
        <th>CREATED</th>
        <th>MODIFIED</th>
        <th>ACTION</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let organisation of organisationsList">
        <td>{{organisation.OrganisationUid}}</td>
        <td>{{organisation.OrganisationName}}</td>
        <td>{{organisation.CreatedOn | date: 'dd-MMM-yyyy hh:mm:ss a'}}</td>
        <td>{{organisation.ModifiedOn | date: 'dd-MMM-yyyy hh:mm:ss a'}}</td>
        <td>
          <button class="btn btn-primary" (click)="goToViewOrganisation(organisation.Id)"><i class="icon-eye"></i></button>
        </td>
      </tr>
    </tbody>
  </table>

component.ts

  ngOnInit(): void {
    this.dtOptions = {
     pagingType: 'full_numbers',
     order: [2, 'desc'],
     columnDefs: [{
     targets: [4],
     orderable: false,
    }, {
     targets: [2, 3],
     type: 'date'
    }]
   };
   this.loadOrganisationsList();
  }

   loadOrganisationsList() {
    this.orgService.getOrganisationsList().subscribe((res) => {
    this.organisationsList = res['Data']['Organisations'];
    this.dtTrigger.next();
    }, (err) => {
     if (err.status !== 403) {
     ));
   }
  });
}

service.ts

getOrganisationsList() {
const organisation = JSON.parse(localStorage.getItem('organisation'));
if (organisation !== undefined && organisation !== null) {
  return of(organisation);
} else {
  const API_URL = `${this.env.apiUrl}/Organisations`;
  return this.httpClient.get(API_URL).map((data: any) => {
    localStorage.setItem('organisation', JSON.stringify(data));
    return data;
  }).catch((error: any) => {
    return Observable.throw(error);
  });
 }
}

enter image description here

Answer 1

为 dtTrigger.next() 添加超时，如下代码所示：

loadOrganisationsList() {
this.orgService.getOrganisationsList().subscribe((res) => {
  this.organisationsList = res['Data']['Organisations'];
  setTimeout(function() {
    this.dtTrigger.next();
     }.bind(this));
   }, (err) => {
  if (err.status !== 403) {
  }
 });
}

Answer 2

可能是 datatable 在您收到服务器响应之前被激活。尝试像下面这样添加 *ngIf：

<table class="table table-striped" *ngIf="organisationsList.length > 0" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">

使用 angular 9 无法正确加载数据表分页、搜索和排序

Datatable pagination, search and sorting is not loading properly using angular 9

angular-datatables

angular