입력 장식 자에 대한 각도 2 데이터 바인딩이 작동하지 않습니다.

Question

입력 장식자를 기반으로 한 도넛 형 차트의 값을 변경하려고합니다. 값을 초기화 할 수는 있지만 더 이상 변경할 수는 없습니다.

저는 양방향 데이터 바인딩에 <input type="number" [(ngModel)]="complete">을 사용하고 있습니다. 그러나 그것은 작동하지 않습니다. 템플릿이 이미 호출되었고 나중에 데이터를 변경하기 때문에 작동하지 않는 것 같습니다.

어떤 해결책이 있습니까?

작업 번호 : http://plnkr.co/edit/hYlFp1BX8ebixQMqAtNj?p=preview

부모 구성 요소 번호 : 부모 요소 이다에서 complete 값 변경이 지시에 의해 수신되는 @Input() complete

@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

.

귀하의 차트는 업데이트되지 않습니다. 값이 변경 될 때마다 전체 차트를 다시 칠해야합니다.

나의 제안 : completeObservable<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.