Angular 2 Liaison de données ne fonctionnant pas pour le décorateur d'entrée

Question

J'essaye de changer la valeur pour un diagramme de beignet basé sur le décorateur d'entrée. Je suis en mesure d'initialiser la valeur, mais je ne peux plus la modifier. J'utilise <input type="number" [(ngModel)]="complete"> pour que les données à 2 voies lient la valeur. Mais ça ne marche pas. Je pense que ça ne marche pas parce que le modèle est déjà appelé et nous changeons les données plus tard.

Y at-il une solution à cela?

Code de travail: http://plnkr.co/edit/hYlFp1BX8ebixQMqAtNj?p=preview

Parent code du composant:

@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

Les changements de valeur complete au composant parent sont reçus par le @Input() complete à la directive.

Votre graphique n'est pas mis à jour. Vous devrez repeindre l'ensemble du graphique chaque fois que la valeur change.

Ma suggestion: faire complete un Observable<integer> et pousser une nouvelle valeur à chaque fois que l'utilisateur change la complete<input>.

Les changements pertinents:

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

DEVIENT:

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

Et vous avez besoin de changer la directive ainsi:

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.