如何使用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組件的代碼時，似乎可以傳遞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': ''
}

要么

其他方法將使用style屬性，如文檔中所示