如何申请一个API人物来引导进度条角6？

Question

我是新来的角6，我刚刚成功地实现调用API的成表中的行

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

这就要求百分比数字到表，现在我想添加的引导进度条沿着这些数字来强调这一点。我碰到这个堆栈溢出问题：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-style这是AngularJS指令，而不是角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>

Answer 2

像错误消息称，NG-style属性是不是知道属性。

请参阅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>