Угловая 2 Связывание данных не работает для ввода Decorator

Question

Я пытаюсь изменить значение для диаграммы пончика на основе Декоратора ввода. Я могу инициализировать значение, но не могу его изменить.

Я использую <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 в директиве.

Ваша диаграмма не обновляется. Вам придется перерисовывать всю диаграмму каждый раз, когда изменяется значение.

Мое предложение: сделать complete в Observable<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.