Question

我已经实现了一个进度条，并通过使用document.getElementsByClassName访问进度条的width属性来显示html中进度条的百分比。但是我应该用什么在Angular 2中实现它，它使用typescript。

使用HTML和JS代码：https://jsfiddle.net/nvarun123/2cy2kg7y/1/

Angular 2 Code（应该修复）：https://plnkr.co/edit/nlRa0aaQv7GntxxBy8AC?p=preview

html代码：

<div class="container">
  <div class="bar">
    <span class="bar-fill"></span>
  </div>
</div>
<div id="progress"></div>

JS代码：

var
  bar = document.getElementsByClassName("bar")[0],
  barFill = document.getElementsByClassName("bar-fill")[0],
  progress = document.getElementById("progress"),
  barWidth = window.getComputedStyle(bar, null).getPropertyValue("width"),
  barFillWidth = window.getComputedStyle(barFill, null).getPropertyValue("width"),
  pct = 100 * (parseFloat(barFillWidth) / parseFloat(barWidth)) + "%";

progress.innerHTML = pct;

Answer 1

我会使用ngStyle，因此您可以动态更新进度条百分比并显示给用户。

HTML代码

<div class="container">
  <div class="bar">
    <span class="bar-fill" [ngStyle]="{'width': progressPercentage + '%'}">
    </span>
  </div>
</div>
<div id="progress">{{progressPercentage}}%</div>

TypeScript代码

import {Component} from '@angular/core';
@Component({
    selector:'progressbar',
    styleUrls: ['./progressbar.component.css'],
    templateUrl: './progressbar.component.html'

})
export class ProgressBar{
    progressPercentage: number;

    constructor() {
      this.progressPercentage = 50;
    }
}

plunkr https://plnkr.co/edit/LytbNF5HdDYUAxBUYenf?p=preview

在Angular 2中访问DOM属性

1 个答案: