Angular 2 Привязка данных не работает для Input Decorator

Question

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

я использую <input type="number" [(ngModel)]="complete"> 2-х сторонние данные связывают значение. Но это не работает. Я думаю, что это не работает, потому что шаблон уже вызван, и мы изменяем данные позже.

Есть ли какое-то решение для этого.?

Рабочий код: 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;

Смотрите демо плункер здесь.