Question

知道如何将数据绑定到Angular2中的进度条吗？ {{}}不适用于aria-valuenow等现有属性或进度标记的值。下面是引导程序。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

更新详情

update.service.ts：这是为了创造难以理解的，

  public _progress$: Observable<number>;
  private _progress: number = 0;
  private _progressObserver: Observer<number>;
  constructor(private _http:Http, private _configurationService: ConfigurationService,private _authenservice:AuthenticationService) {
    this._progress$ = new Observable(observer => {
      this._progressObserver = observer
    });
  }
....
this._progressObserver.next(this._progress); // this is to push in the progress number from xhr.upload.onprogress

home.component.ts：显示进度条的组件

  private  _uploadProgressStatus:Observable<number>;// as "asyn" only takes in the promise of observable, I plan to feed _uploadProgressStatus in

  constructor(private _videoManagementService:VideoManagementService,
              private _uploadService:UploadService) {
    console.info('HomeComponent  Mounted Successfully');
    this._uploadProgressStatus = this._uploadService._progress$; 
 this._uploadProgressStatus.subscribe(
  data => {
    console.log('progress = '+data/100);
  }); //if subscribe to this._uploadProgressStatus, no values are received...
this._uploadService._progress$.subscribe(
  data => {
    console.log('progress = '+data/100);
  });
  } // if subscribe to this._uploadService._progress$ ,numbers are received.

home.component.html

  <h4>Uploading...{{ _uploadProgressStatus | async | percent}}</h4>
  <div class="progress">
    <div class="progress-bar" role="progressbar" [style.width]="_uploadProgressStatus | async | percent" aria-valuemin="0" aria-valuemax="100">
      <h4>{{ _uploadProgressStatus | async | percent}} </h4>
    </div>
  </div>

这不起作用。所以问题是如何在home.component.ts中创建observable以接收数字？

在html更新_uploadProgressStatus到_uploadService._progress $也无法正常工作

Answer 1

    var myVar = setInterval(myTimer, 200);
    var a=1;
    function myTimer() {
      a++;
      if(a>=99){a=1;}
      document.getElementById("progress-bar").style.width = a+"%";
      document.getElementById("demo").innerHTML = a+"% Complete";
    }


   function myStopFunction() {
    clearTimeout(myVar);
   }
  /* function myStartFunction() {
    myVar = setInterval(myTimer, 200);
   }*/

    #progress-bar{
    background-color:#00CC00;
    }

   <div class="progress">
      <div class="progress-bar" style="width:70%" id="progress-bar">
        <span id="demo">70% Complete</span>
        
      </div>
    </div>
<button onclick="myStopFunction()">Stop</button>

<!--<button onclick="myStartFunction()">Start</button>-->

Answer 2

应该很简单。以下是工作组件的示例：

import { Component } from 'angular2/core'

@Component({
  selector: 'my-special-component',
  template: `
    <div class="progress">
      <div class="progress-bar" role="progressbar" [style.width]="myProgress | percent">
        <span class="sr-only">{{ myProgress | percent" }} Complete</span>
      </div>
    </div>
  `
})
export class MySpecialComponent {
  // A number from 0 to 1
  private myProgress: number

  constructor() {}
}

重要的一点是：[style.width]="myProgress | async | percent" 这是对CSS width属性的单向绑定。 async管道确保即使myProgress更改，值仍会更新。 percent管道将值转换为类似70%的字符串。

更高级的示例 - 您可能希望使用类似Input()甚至Rx.js observable的内容来表示myProgress变量。这甚至可以与承诺一起使用。在这种情况下，您将需要使用async管道：

import { Component, ChangeDetectionStrategy } from 'angular2/core'

@Component({
  selector: 'my-special-component',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="progress">
      <div class="progress-bar" role="progressbar" [style.width]="myProgress | async | percent">
        <span class="sr-only">{{ myProgress | async | percent" }} Complete</span>
      </div>
    </div>
  `
})
export class MySpecialComponent {
  // A number from 0 to 1
  Input() myProgress: number

  constructor() {}
}

现在，如果您要在其他地方更改此值，请在父组件中说明：

import { Component } from 'angular2/core'
import { MySpecialComponent } from './my-special-component.ts'

@Component({
  selector: 'root-component',
  directives: [ MySpecialComponent ],
  changeDetection: ChangeDetectionStrategy.OnPush
  template: `
    <my-special-component [myProgress]="rootProgress"</my-special-component>
  `
})
export class RootComponent {
  // A number from 0 to 1
  private rootProgress: number

  constructor() {
    this.rootProgress = 0.5
  }
}

^^在这个例子中我们有2个组件：MySpecialComponent作为子组件，RootComponent作为父组件。如您所见，MySpecialComponent没有在任何地方显式设置myProgress值。但是，它将解析为0.5因为我们在RootComponent中设置它并将其绑定到MySpecialComponent的myProgress Input（）绑定。

绑定到进度条

2 个答案: