Angular2 Bind-Eigenschaft an Component Input

Question

Ich habe ein Objekt 'orderItem' mit einer Zahl-Eigenschaft 'Menge'.

zur Anzeige i`m zu 'Menge' Bindung -> {{}} orderItem.amount

Um die Menge zu erhöhen und decremet i

eine verschachtelte Komponente 'inputNumberControl' verwenden möchten, wenn die Weitergabe komplette OrderItem an die verschachtelte Komponente

<input-number-control [item]="orderItem"></input-number-control>

und dort die Menge alles Manipulieren workls wie erwartet, Menge in parentcopmonent erhöht und erniedrigt.

I d mögen die Steuerung flexibler nur die Eigenschaft der verschachtelten Komponente

<input-number-control [item]="orderItem.amount"></input-number-control>

dann aber die Menge nicht ändert in der Komponente Mutter vorbei zu verwenden.

Irgendeine Idee, was der Grund für dieses Verhalten ist und wie man damit umgeht?

-Code der Nummer-control-Komponente

export class InputNumberComponent{ 
    @Input() item:OrderItem; 

decrementAmount() 
{ 
    if(this.item.amount>1)this.item.amount--; 
} 
incrementAmount() 
{ 
    this.item.amount++; 
} 
} 

das funktioniert gut

@Input() value:number; 

decrementAmount() 
{ 
    if(this.value>1)this.value--; 
} 
incrementAmount() 
{ 
    this.value++; 
} 

nicht funktioniert

Answer 1

Wenn Sie Änderungswert von item in input-number-control sind und diese reflektieren wollen in Eltern (bei Verwendung eines Objekts) können Sie mit Zwei-Wege-Datenbindung von Anguar2 mit [()] gehen - @Input xxx; @Output xxxChange; Syntax zusammen;

---

<input-number-control [(item)]="orderItem.amount"></input-number-control> 

---

import {Input,Output,EventEmitter} from '@angular/core'; 

export class InputNumberComponent{ 
    @Input() item;       //<-----Note - changed line 
    @Output() itemChange=new EventEmitter(); 

    decrementAmount() 
    { 
    if(this.item>1) 
    this.itemChange.emit(this.item--); 
    } 
    incrementAmount() 
    { 
    this.itemChange.emit(this.item++); 

    } 
} 

Diese Demo ist aus Ihren Code nicht gemacht, aber die relevanteste, die Sie würde helfen.

Demo: https://plnkr.co/edit/9D6UIZcI9Lc2EOJjsYy4?p=preview