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

我試圖改變基於輸入裝飾器的甜甜圈圖的值。我能夠初始化該值，但無法進一步更改。角2數據綁定不適用於輸入裝飾器

我正在使用<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; 
    } 
}

來源

2016-08-04 Varun

該值在輸入處發生變化。你的圖表是不更新的。每當價值發生變化時，您都必須重新繪製整個圖表。 – acdcjunior

@acdcjunior我如何做到這一點，如果我使用ChangeDetectorRef'構造函數（私人cdr：ChangeDetectorRef）{}'，整個事情都不起作用。任何想法如何做到這一點？ – Varun

由@Input() complete在該指令接收到的在父組件是的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。

來源

2016-08-05 00:08:49 acdcjunior

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

回答

相關問題