Ngx-datatable - проблемы с индикатором выполнения ng-template

Использую следующие версии:

ngx-datatable: 11.3.2 угловой: 5

Я пытаюсь обновить шаблон ячейки ngx-datatable, чтобы отобразить индикатор выполнения.

Я определил ниже шаблон HTML:

<ngx-datatable-column name="Progress" prop="progress_percent" [canAutoResize]="true" [width]="35">
  <ng-template ngx-datatable-cell-template let-value="value" let-row="row">

    <div class="progress">
      <div *ngIf="value < 100" class="progress-bar bg-warning progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>

      <div *ngIf="row.status == 'COMPLETE'" class="progress-bar bg-success progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>

      <div *ngIf="row.status == 'ERROR'" class="progress-bar bg-danger progress-bar-striped progress-bar-animated" [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100" [style.width.%]="value"></div>
    </div>
  </ng-template>


</ngx-datatable-column>

Однако в столбце ничего не отображается.

Если я помещаю div вне ngx-datatable, он отображается правильно.

Я также пытался просто использовать индикатор выполнения демонстрационного примера, но он просто показывает пустой квадрат:

введите описание изображения здесь

Осмотрев элемент, все в порядке, но я не могу понять, почему он отображается некорректно:

введите описание изображения здесь

Я также пробовал использовать mat-table, и индикатор выполнения отображается нормально.

Добрый совет.


angular ngx-datatable
person Luca Brasi    schedule 07.05.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что ж, это было просто.

Если вы хотите интегрировать индикатор выполнения BootStrap в ngx-datatable, вам необходимо добавить стиль в div с классом прогресса (свойства ширины и высоты):

 <ng-template ngx-datatable-cell-template let-value="value" let-row="row">


         <div class="progress" style="width: 140px; height: 15px">


            <div *ngIf="value < 100"
                 class="progress-bar bg-warning progress-bar-striped progress-bar-animated"
                 [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100"
                 [style.width.%]="value">{{value}}%</div>

            <div *ngIf="row.status == 'COMPLETE'"
                 class="progress-bar bg-success progress-bar-striped progress-bar-animated"
                 [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100"
                 [style.width.%]="value">{{value}}%</div>

            <div *ngIf="row.status == 'ERROR'"
                 class="progress-bar bg-danger progress-bar-striped progress-bar-animated"
                 [attr.aria-valuenow]="value" [attr.aria-valuemin]="0" [attr.aria-valuemax]="100"
                 [style.width.%]="value">{{value}}%</div>
         </div>

        </ng-template>


      </ngx-datatable-column>

person Luca Brasi    schedule 09.05.2018