コンポーネント入力へのAngular2バインドプロパティ

Question

私は、数値プロパティ 'amount'を持つオブジェクト 'orderItem'を持っています。 '量' に結合するディスプレイi`mため

- > {{}} orderItem.amount

iはネストされたコンポーネントを使用したい量を増加し、decremet TO 'inputNumberControl'

通過するときネストされたコンポーネント

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

とそこparentcopmonentで予想される、量が増加し、減少されるように、すべてがworkls量を操作する完全なのOrderItem。

Iは、ネストされたコンポーネント

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

その後量は親コンポーネントに変更されていないだけプロパティを渡し、より柔軟な制御を使用したいDは

この動作の理由とその対処方法は何ですか？

数制御用コンポーネントのコード

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

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

あなたはinput-number-controlにitemの値を変更し、同じことを反映したい場合、これは罰金

@Input() value:number; 

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

doesntの仕事

Answer 1

の作品親で（オブジェクトを使用している間）、Anguar2の双方向データバインディングは[（）] - @ Input xxx; @Output xxxChange;シンタックスを一緒にする。

---

<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++); 

    } 
} 

このデモは、あなたのコードで作られたが、あなたを助けるその関連ではありません。

デモ：あなた `入力数control`コンポーネントでhttps://plnkr.co/edit/9D6UIZcI9Lc2EOJjsYy4?p=preview