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

【问题标题】：Ngx-datatable - ng-template progress bar issuesNgx-datatable - ng-template 进度条问题
【发布时间】：2018-05-07 03:54:41
【问题描述】：

我正在使用以下版本：

ngx 数据表：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

【解决方案1】：

嗯，这很简单。

如果您正在考虑在 ngx-datatable 中集成 BootStrap 进度条，您必须在 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>

【讨论】：