如何在Angular 6 中将API 数字应用于Bootstrap 进度条？

Question

我是 Angular 6 的新手，我刚刚成功将 API 调用到 table 行

<tr *ngFor="let stats of stats$">
  {{ stats.StoragePercentage }}%
</tr>

这会将百分比数字转换为 tables，我现在想在这些数字旁边添加 bootstrap 进度条以突出显示这一点。我遇到了这个 Stack Overflow 问题：Change bootstrap progress-bar width from angularjs 并尝试了那里提供的答案，但没有成功。对我来说，我现在所拥有的仍然不起作用的是：

<tr *ngFor="let stats of stats$">
  <div class="progress">
    <div class="progress-bar" 
      role="progressbar"
      ng-style="width: {{ stats.StoragePercentage }}"
      aria-valuenow="{{ stats.StoragePercentage }}"
      aria-valuemax="100">
        {{ stats.StoragePercentage }}%
    </div>
  </div>
</tr>

我得到的错误是：

我做错了什么？

Answer 1

如错误消息所述，ng 样式属性是未知的属性。

请看here

<tr *ngFor="let stats of stats$">
  <div class="progress">
    <div class="progress-bar" 
      role="progressbar"
      [ngStyle]="width: {{ stats.StoragePercentage }}"
      aria-valuenow="{{ stats.StoragePercentage }}"
      aria-valuemax="100">
        {{ stats.StoragePercentage }}%
    </div>
  </div>
</tr>

Answer 2

有一件事你做的不正确是使用 ng-style 这是 AngularJS 指令而不是 Angular 2+。尝试以下操作：

<tr *ngFor="let stats of stats$">
  <div class="progress">
    <div class="progress-bar" 
      role="progressbar"
      [ngStyle]="{'width': stats.StoragePercentage + '%'}"
      aria-valuenow="{{ stats.StoragePercentage }}"
      aria-valuemax="100">
        {{ stats.StoragePercentage }}%
    </div>
  </div>
</tr>

如何在Angular 6 中将API 数字应用于Bootstrap 进度条？

How to apply an API figure to Bootstrap progress bar in Angular 6?

progress-bar

angular-ui-bootstrap

angular6