Question

我使用以下版本：

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，进度条也很好。

请告知。

Answer 1

嗯，这很简单。

如果您正在考虑在ngx-datatable中集成BootStrap进度条，则必须在div中使用进度类（宽度和高度属性）添加样式：

＆＃13;

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

＆＃13;

Ngx-datatable - ng-template进度条问题

1 个答案: