Angular2双向绑定和组件属性更新

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;
    }

从'@angular/core'导入{Component}；
@组成部分({
选择器：“我的组件”，
模板：`
{{c}}
`
})
导出类MyComponent{
a=1；
b=2；
c=这个.a+这个.b；
}

在TypeScript中设置类字段的值实际上只是在构造函数中设置它的语法：

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

您可以通过使

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;
   }
}

@布拉索：很高兴我能帮上忙：）这东西一开始也让我很吃惊，乍一看并不是很直观。

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;
}