Angular 2數據綁定不適用於輸入裝飾器

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 <input>使complete成為Observable<integer>並推送一個新值。

相關更改：

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

請參閱此處的插件演示 。