0

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

1 回答 1

0

在 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 取决于aand 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;
}
于 2017-04-25T15:54:22.610 回答