進捗バーへのバインド

Question

Angular2の進捗バーにデータをバインドする方法はありますか？ a {{}}はaria-valuenowのような既存の属性や進捗タグの値には作用しません。以下はブートストラップ1です。詳細

update.service.tsと

<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> 

更新：プログレスバーを表示するコンポーネント：これは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にobservableを作成して数値を受け取る方法です。 _uploadService._progress $へのhtml更新_uploadProgressStatusで

もそれは非常にシンプルであるべき

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プロパティに対して結合1つの方法です。 asyncパイプは、myProgressが変更された場合でも値が更新されたままであることを保証します。 percentパイプは、値を70%のような文字列に変換します。

---

あなたはおそらくmyProgress変数を表すために、観察Input()のようなもの、あるいはRx.jsを使用したいと思うでしょう、より高度な例 - 。これは約束でも機能します。あなたはこのような状況でasyncパイプを使用したいと思うでしょう：私たちは2を持っている

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 
    } 
} 

^^この例では：あなたが他の場所でこの値を変更した場合今

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() {} 
} 

、親コンポーネントで言いますコンポーネント：子としてのMySpecialComponent、親としてのRootComponent。ご覧のように、MySpecialComponentはmyProgressの値を明示的にどこにも設定していません。しかし、これはRootComponentに設定し、それをMySpecialComponentのmyProgress Input（）バインディングにバインドするため、0.5として解決されます。