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

在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的值仅在组件初始化时设置！ 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;
}

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

1 个答案: