Question

我有以下数据表：

<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组件的方式：

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

加载数据表组件时，我可以看到未样式化的数据表正在用数据呈现，然后当我单击按钮再次检索数据并绑定到表时，我的数据表会使用必要的样式表正确呈现。

我怀疑在将数据表组件的所有必要样式加载之前，我的数据会更快地绑定到数据表，因此在第二轮绑定中，样式已加载并且数据表正确显示。

仅在视图的CSS已完全加载后，如何才能将数据绑定到我的数据表？

我尝试查看ng-cloak，但这仅适用于发生闪烁的情况，而这里并非如此。

我还尝试将encapsulation设置为none等，但这都不起作用。

有什么建议吗？

在CSS载入Angular 6之后将数据绑定到Datatable

0 个答案: