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 设为 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.

Angular 2 数据绑定不适用于输入装饰器

Angular 2 Data binding not Working for Input Decorator

2-way-object-databinding

angular2-template

angular2-inputs

angular