Ngx-datatable 11.3.2（Angular 5）中ng-template进度条实现问题

我来帮你完善这个ngx-datatable单元格进度条的实现，结合你用的Angular 5和ngx-datatable 11.3.2版本，下面是完整的可行方案：

首先补全你未写完的模板代码，同时优化细节让进度条正常显示：

<ngx-datatable-column 
  name="Progress" 
  prop="progress_percent" 
  [canAutoResize]="true" 
  [width]="200"> <!-- 原宽度35过窄，进度条无法正常展示，建议调整为200左右 -->
  <ng-template ngx-datatable-cell-template let-value="value" let-row="row">
    <div class="progress" style="height: 20px; margin: 4px 0;">
      <!-- 根据进度值动态切换样式 + 设置宽度 -->
      <div 
        class="progress-bar"
        [ngClass]="{
          'bg-warning progress-bar-striped progress-bar-animated': value < 50,
          'bg-info': value >=50 && value < 80,
          'bg-success': value >=80 && value <100,
          'bg-danger': value === 100
        }"
        [ngStyle]="{ width: value + '%' }"
        role="progressbar"
        [attr.aria-valuenow]="value"
        aria-valuemin="0"
        aria-valuemax="100">
        <!-- 可选：在进度条内显示百分比文本 -->
        {{ value }}%
      </div>
    </div>
  </ng-template>
</ngx-datatable-column>

关键细节说明： #

• 宽度调整：原[width]="35"的宽度不足以展示进度条，调整为200（或根据你的布局需求自定义），配合[canAutoResize]="true"可以让列自适应内容。
• 动态样式绑定：用[ngClass]根据进度值区分状态样式——低进度用带动画的警告条，中等进度用信息色，接近完成用成功色，100%用危险色（可根据业务需求修改）。
• 进度宽度控制：通过[ngStyle]直接用绑定的value（即数据源的progress_percent字段）设置进度条宽度百分比。
• 可访问性优化：添加ARIA属性，让组件符合Web可访问性标准。
• 文本显示：进度条内的百分比文本可选，若不需要可以直接删除这部分代码。

自定义样式（可选） #

如果你的项目没有引入Bootstrap，或者需要自定义进度条样式，可以在组件CSS中添加：

.progress {
  border-radius: 6px;
  background-color: #f0f2f5;
}

.progress-bar {
  transition: width 0.3s ease;
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 20px; /* 和进度条高度一致，让文本垂直居中 */
}

/* 自定义动画条纹样式 */
.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 1rem 0;
  }
  100% {
    background-position: 0 0;
  }
}

注意事项： #

• 确保数据源的progress_percent字段是0-100之间的数字，避免出现超出范围的值导致样式异常。
• Angular 5和ngx-datatable 11.3.2版本完全支持上述模板语法，无需额外配置。

内容的提问来源于stack exchange，提问作者Luca Brasi