入力デコレータの角2データバインディングが機能しません

Question

入力デコレータに基づいてドーナツチャートの値を変更しようとしています。私は値を初期化することができますが、これ以上変更することはできません。

私は値をバインドする2ウェイデータに<input type="number" [(ngModel)]="complete">を使用しています。しかし、それは動作しません。テンプレートは既に呼び出されており、後でデータを変更するので、動作していないと思います。

解決方法はありますか？

操作コード：http://plnkr.co/edit/hYlFp1BX8ebixQMqAtNj?p=preview

親コンポーネントコード：

@Component({ 
    selector: 'my-app', 
    providers: [], 
    template: ` 


    <test-component [complete]="complete"></test-component> 
    Completed %:<input type="number" [(ngModel)]="complete"> 

    `, 
    directives: [TestComponent] 
}) 
export class App { 
    complete:number=40; 
    constructor(){ 

    } 
    test(){ 
    this.complete=60; 
    } 
} 

Answer 1

親コンポーネントでcomplete値の変更が指示で@Input() completeによってを受信して​​います。

あなたのチャートは更新されていません。値が変更されるたびにグラフ全体を再描画する必要があります。

私の提案：completeObservable<integer>を作成し、ユーザーがcomplete<input>を変更するたびに新しい価値を押してください。

関連する変更：

@Component({ 
    ... 
    <test-component [complete]="complete"></test-component> 
    Completed %:<input type="number" [(ngModel)]="complete"> 
... 
export class App { 
    complete:number=40; 
    constructor(){ 

は次のようになります。

@Component({ 
    ... 
    <test-component [complete]="completeObs"></test-component> 
    Completed %:<input type="number" [(ngModel)]="complete" 
               (ngModelChange)="completeObs.next($event)"> 
... 
export class App { 
    complete:number=40; 
    completeObs:Observable<integer> = new BehaviorSubject<integer>(this.complete); 
    constructor(){ 

そして、あなたが同様にディレクティブを変更する必要があります。

export class TestComponent{ 
    @Input() complete:Observable<integer>; 

    ngAfterViewInit() { 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var colors=['green','orange']; 
    var labels=['Completed','Pending']; 

    this.complete.subscribe((complete) => {  // <-- notice it subscribes to the input 
     let incomplete:integer = 100 - complete; 

See plunker demo here。