Angular2雙向綁定和組件屬性更新

Question

Angular2新手在這裏。

我有三個數字組件屬性'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的值僅在組件初始化時纔會設置！ Angular沒有辦法知道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() { 
     return this.a + this.b; 
    } 
} 

的告誡，這是那就是c將獲得每次運行變化檢測發生 - 這不是一個真正的問題與功能儘管這很簡單，但是您需要小心，因爲這會降低您的應用速度，因此您在這樣的綁定中沒有做太重的事情。

也就是說，我不認爲你需要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; 
}