如何使用angular2中的原始进度条以不同的颜色显示行的进度条

Question

我有数据列表，正在显示进度条，但是我需要那些进度条具有不同的颜色。我也尝试了ng-class，但是没有用。

HTML：

<td><p-progressBar width="100" [value]="statusDisplay.progressValue" [ngClass]="{'progressBar-green': statusDisplay.progressValue > 50}"></p-progressBar></td>

Answer 1

当我查看p-progressBar组件的at the code时，似乎可以传递styleClass属性绑定将自定义类绑定到p-progressBar

<td>
  <p-progressBar width="100" [value]="statusDisplay.progressValue" 
    [styleClass]="getStyleClass(statusDisplay)"> 
  </p-progressBar>
</td>

// you can have your own logic for class.
getStyleClass (statusDisplay) {
    return statusDisplay.progressValue > 50 ? 'progressBar-green': ''
}

OR

其他方法是使用style属性，例如已演示的in docs