Question

我有一个Object＆＃39; orderItem＆＃39;数字属性＆＃39;金额＆＃39;。

显示我绑定到＆＃39;金额＆＃39; - ＆GT; {{orderItem.amount}}

增加和减少我想要使用嵌套组件的数量＆＃39; inputNumberControl＆＃39;

将完整的orderItem传递给嵌套组件

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

并且操纵所有工作量与预期一样，在parentcopmonent中的金额递增和递减。

我想使用控件更灵活，只将属性传递给嵌套组件

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

但是父组件中的金额没有变化。

任何想法都说明了这种行为的原因以及如何处理它？</ p>

号码控制组件的代码

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

不起作用

Answer 1

如果要更改item中input-number-control的值并希望在父级中反映相同内容（使用对象时），则可以使用 [A>]进行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

Angular2将属性绑定到Component Input

1 个答案: