ngx-datatable无法正确加载

Question

我有一个带有bootstrap主题的ngx-datatable。效果很好，但是问题是，当我第一次加载页面时，页面无法正确加载。

打开控制台后，表将正确加载。或者如果我反过来做的话，如果控制台是打开的并且我关闭了，则加载会很好。

HTML组件

<div>
   <ngx-datatable class="bootstrap" columnMode="standard" 
   [rows]="this.contracts" [loadingIndicator]="loadingIndicator" 
   [headerHeight]="50"
   [summaryRow]="false" [summaryPosition]="'bottom'" [footerHeight]="50" 
   [limit]="3" [rowHeight]="'auto'" [reorderable]="reorderable"
   [scrollbarH]="true">
   <ngx-datatable-column>
   <ng-template let-column="column" ngx-datatable-header-template>
        Titulli i aktivitetit të prokurimit
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.activityTitle }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Data e publikimit të njoftimit për kontratë
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.contract.publicationDate | date: 'dd/MM/yyyy' }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Nr. i OE që kanë shkarkuar dosjen e tenderit
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.noOfCompaniesWhoDownloadedTenderDoc }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Data e publikimit të njoftimit për dhënie të kontratës
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.contract.publicationDateOfGivenContract | date: 'dd/MM/yyyy' }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Data e publikimit të anulimit të njoftimit
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.cancellationNoticeDate | date: 'dd/MM/yyyy' }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Vlera e parashikuar e kontratës
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.contract.predictedValue }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Emri i OE të cilit i është dhënë kontrata
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.company.name }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Data e nënshkrimit të kontratës
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.contract.signingDate | date: 'dd/MM/yyyy' }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Data e fillimit të implementimit të kontratës
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.contract.implementationDeadlineStartingDate | date: 'dd/MM/yyyy' }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Data e mbylljes se kontrates
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.contract.closingDate | date: 'dd/MM/yyyy' }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Vlera totale e kontratës, duke përfshirë të gjitha taksat
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.contract.totalAmountOfContractsIncludingTaxes }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column>
      <ng-template let-column="column" ngx-datatable-header-template>
        Drejtoria
      </ng-template>
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row.directorates }}
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
</div>

那么您认为问题出在哪里？也许我没有适当地包括图书馆。还是因为上面有很多数据？