Angular2双方向バインディングとコンポーネントプロパティの更新

Question

Angular2 newbie here。

私は3つの数値コンポーネントプロパティ 'a'、 'b'、 'c'を持ちます。ここで、c = a + bです。 'a'と 'c'は、テンプレート上のステートメントを入力するための双方向バインディングを使用します。ビューで値が変更されると、コンポーネント内で値も変更されます。ただし、値 'c'は更新されません。 'a'または 'b'の値が変更されるたびに値 'c'を更新するにはどうすればよいですか？助けてくれてありがとう。

活字体でクラスフィールドの値を設定

import { Component } from '@angular/core'; 

    @Component({ 
     selector: 'my-component', 
     template: ` 
      <input type="number" [(ngModel)]="a"/> 
      <input type="number" [(ngModel)]="b"/> 
      {{c}} 
     ` 
    }) 

    export class MyComponent { 

     a = 1; 
     b = 2; 
     c = this.a + this.b; 
    } 

Answer 1

実際コンストラクタでそれを設定するためだけの構文糖である：これが動作しない理由を

export class MyComponent { 
    a = 1; 
    b = 2; 
    c = this.a + this.b; 
} 

// is the same as 

export class MyComponent { 
    constructor() { 
     this.a = 1; 
     this.b = 2; 
     this.c = this.a + this.b; 
    } 
} 

今ではたくさん明確にする必要があります - cの値は、コンポーネントの初期化時にのみ設定されます。 cの値がaとbに依存していることをAngularが知る方法はありません。

あなたはc方法を行うことでこれを回避できます。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-component', 
    template: ` 
     <input type="number" [(ngModel)]="a"/> 
     <input type="number" [(ngModel)]="b"/> 
     {{c()}} 
    ` 
}) 
export class MyComponent { 
    a = 1; 
    b = 2; 

    c() { 
     return this.a + this.b; 
    } 
} 

これまでの注意点は、それがcが変化検出が行われるたびに実行取得することである - それは本当にとしての機能の問題ではありませんこのようにシンプルですが、このようなバインディングで重すぎることをしないように注意する必要があります。

つまり、私はあなたがまったく必要と思わない！このようなことを行うのはずっと簡単です：

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-component', 
    template: ` 
     <input type="number" [(ngModel)]="a"/> 
     <input type="number" [(ngModel)]="b"/> 
     {{a + b}} or {{a}}{{b}} 
    ` 
}) 
export class MyComponent { 
    a = 1; 
    b = 2; 
}