Angular2 Zwei-Wege-Bindung und Komponenteneigenschaften Updates

Question

Angular2 Neuling hier.

Ich habe drei numerische Komponenten Eigenschaften 'a', 'b' und 'c' mit c = a + b. 'a' und 'c' verwenden eine bidirektionale Bindung, um Anweisungen in die Vorlage einzugeben. Wenn die Werte in der Ansicht geändert werden, ändern sie sich auch in der Komponente. Der Wert "c" wird jedoch nicht aktualisiert. Wie bekomme ich den Wert "c", um zu aktualisieren, wenn die Werte von "a" oder "b" geändert werden? Danke für die Hilfe.

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

Wenn Sie den Wert eines Klassenfeldes in Typoskript ist eigentlich nur Syntax Zucker für sie im Konstruktor Einstellung:

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

Nun sollte es viel klarer sein, warum das nicht funktioniert - die Wert von c wird nur gesetzt, wenn die Komponente initialisiert wird! Angular kann nicht wissen, dass der Wert c von a und b abhängt.

Sie können dies umgehen, indem c machen eine Methode:

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

Der Nachteil dabei ist, dass ist, dass c bekommen jedes Mal, Änderungserkennung erfolgt laufen - das ist nicht wirklich ein Problem mit einer Funktion als So einfach ist das, aber Sie müssen aufpassen, dass Sie in einer solchen Bindung nichts zu Schweres machen, da dies Ihre App verlangsamt.

Das sagte, Ich glaube nicht, dass Sie überhaupt c brauchen! Es wäre viel einfacher, einfach so etwas zu tun:

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