Angular2将属性绑定到组件输入

我有一个Object'orderItem'，其中包含一个数字属性'amount'。Angular2将属性绑定到组件输入

用于显示我真的结合“量” - > {{orderItem.amount}}

若要增加和decremet我想使用一个嵌套组件的量“inputNumberControl”通过当

完整OrderItem的所述嵌套组件

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

并有操纵量一切workls像预期的，在parentcopmonent量递增和递减。

I D喜欢用控制更加灵活，只透过性的嵌套组件

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

但随后的量没有父组件改变。

任何想法什么是这种行为的原因，以及如何处理它？

数量控制分量的代码

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

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

这工作得很好

@Input() value:number; 

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

不工作的item

来源

2016-08-04 PaxVobisCum

在你的'输入用户号码control'组件你如何改变'item'的价值？只显示我的代码。 – micronyks

我会将它加入原始文章中;） – PaxVobisCum

如果要更改值input-number-control，想反映相同（在使用对象时），您可以使用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++); 

    } 
}

这个演示是不是由你的代码，但其相关的一个，这将有助于你。

演示：https://plnkr.co/edit/9D6UIZcI9Lc2EOJjsYy4?p=preview

来源

2016-08-04 11:57:38 micronyks

Angular2将属性绑定到组件输入

回答

相关问题