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

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

0 голосов
/ 07 мая 2018

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

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, он будет отображен правильно.

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

enter image description here

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

enter image description here

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

Просьба сообщить.

1 Ответ

0 голосов
/ 09 мая 2018

Ну, это было просто.

Если вы смотрите на интеграцию индикатора выполнения BootStrap в ngx-datatable, вам нужно добавить стили в div с классом прогресса (свойства width и height): 

 <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>
...