綁定進度條

Question

任何想法如何將數據綁定到Angular2的進度條？ {{}}不適用於現有的屬性，如aria-valuenow或progress tag的值。以下是引導程序。

<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：這是創建obseverable，

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中創建觀察值以接收數字？

在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屬性的綁定。即使myProgress更改，async管道也可確保值保持更新。 percent管道將該值轉換爲像70%這樣的字符串。

---

更先進的示例 - 你可能會希望使用類似Input()甚至Rx.js觀察到的代表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的Input（）綁定。