Привязать данные к Datatable после загрузки css Angular 6

Question

У меня есть следующая Datatable:

<ng-template #modalContent let-d="dismiss" let-c="close">
  <div class="modal-header">
    <h2 class="modal-title text-danger" id="modal-basic-title">Delete Row?</h2>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body text-center">
    <button type="button" class="btn btn-danger" (click)="c('Save click')">Delete</button>
  </div>
</ng-template>

<div *ngIf="showToolbar" class="row bg-secondary pt-1 pb-1">
  <div class="col-12">
    <div class="form-group">
      <app-toggle-switch onText="Active" offText="Inactive"></app-toggle-switch>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <table *ngIf="hasData" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
      <thead>
        <tr>
          <th #tableBody *ngFor="let column of columns">
            {{ column }}
          </th>
          <th *ngFor="let buttonColumnName of buttonColumnNames">
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of model">
          <ng-container *ngFor="let columnDataName of columnDataNames">
            <td *ngIf="modelConfig[columnDataName] && modelConfig[columnDataName].isVisible">
              <ng-container *ngIf="modelConfig[columnDataName].isDate;">
                {{ row[columnDataName] | date:'d MMM yyyy' }}
              </ng-container>
              <ng-container *ngIf="modelConfig[columnDataName].isBoolean;">
                <tfg-toggle onText="Yes" offText="No" [disabled]="true" [value]="row[columnDataName]"></tfg-toggle>
              </ng-container>
              <ng-container *ngIf="!modelConfig[columnDataName].isBoolean && !modelConfig[columnDataName].isDate">
                {{ row[columnDataName] }}
              </ng-container>
            </td>
          </ng-container>
          <td *ngFor="let buttonColumnName of buttonColumnNames">
            <button (click)="executeButtonFunction(row[primaryKeyColumnName], buttonColumnName)" class="btn" [ngClass]="buttonColumnName === 'Delete' ? 'btn-danger' : 'btn-primary'">{{buttonColumnName}}</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div *ngIf="hasData === false" class="text=center">
      No Results
    </div>
    <div *ngIf="hasData == null" class="text=center">
      Loading...
    </div>
  </div>
</div>

И для простоты, следующий поддерживающий .ts файл.

export class DatatableComponent implements AfterViewInit, OnDestroy, OnInit {
  @Input() responseModelObservable: Observable<any>;

  constructor(private modalService: NgbModal) { }

  ngOnInit() {
    this.modelConfig = datatableConfig[this.modelTypeName];
    this.initializeColumns();
  }

  private initializeColumns() {
    this.responseModelObservable.subscribe(x => {
      ...
    });
  }
}

Мой компонент с Datatable в настоящее время является дочерним компонентом.

Вот как я загружаю свой Datatable-компонент из родительского компонента:

<app-datatable 
  [responseModelObservable]="transactionWithDescriptionObservable"
</app-datatable>

Когда загружается мой Datatable-компонент, я вижу, что неструктурированный datatable отображается с данными, а затем, когдаЯ нажимаю кнопку, чтобы снова извлечь данные и привязать к таблице, мой Datatable корректно отображает с необходимой таблицей стилей.

Я подозреваю, что мои данные связываются с Datatable быстрее / раньше, чем все необходимые стили дляКомпонент Datatable был загружен, следовательно, во втором раунде связывания загружаются стили и Datatable отображается правильно.

Как я могу привязать данные к моему Datatable только после полной загрузки CSS представления?

Я попытался посмотреть на ng-cloak, но это применимо только тогда, когда происходит мерцание, издесь дело обстоит не так.

Я также попытался установить encapsulation на none и т. д., но это также не работает.

Есть предложения?