使用数组输入属性时,父对象中的Angular2更改未反映在子对象中

使用数组输入属性时,父对象中的Angular2更改未反映在子对象中,angular,Angular,假设组件A作为父组件,组件B作为子组件。孩子有一个由家长提供的输入what_is_x。大概是这样的: 对于家长: @Component({ selector: 'cmp-A', directives: [ComponentB], template: `<cmp-B [what-is-x]="x"></cmp-B>` }) export ComponentA { public x: any = [1, 2, 3]; constructor() {

假设组件A作为父组件,组件B作为子组件。孩子有一个由家长提供的输入
what_is_x
。大概是这样的:

对于家长:

@Component({
  selector: 'cmp-A',
  directives: [ComponentB],
  template: `<cmp-B [what-is-x]="x"></cmp-B>`
})
export ComponentA {
  public x: any = [1, 2, 3];
  constructor() {
    setTimeout(() => this.x.push(10), 2000);
  }
}

我的问题是,如果父项通过某种方式更改了
x
,子项是否会用新值更新?根据开发者指南中的“组件通信”章节(尚未发布);应该的!但是它没有为我更新,尝试了所有beta直到现在(0,1,2)

更新:从beta.16开始,
{what_is_x}}
现在将在视图中更新,即使数组引用没有更改。另见


原始答案:

默认的更改检测算法通过在更改检测运行期间通过引用比较绑定属性值来查找差异。-

正如@Eric在评论中提到的,您在视图中看不到任何更新的原因是因为您仅绑定到模板中的数组–{{what_is_x}}–并且由于当我们修改数组时数组引用不会更改(例如,使用
push()
),因此更改检测不会检测到任何更改

如果这确实是您的用例,请按照@Eric的建议执行并返回不同的数组,那么更改检测将注意到数组引用已更改

通常,我们的模板绑定到数组的各个项。例如:

<div *ngFor="#item of what_is_x">{{item}}</div>
{{item}
由于为数组的每个项都创建了一个绑定,因此如果我们添加、删除或修改一个项,更改检测就会注意到(并且我们不需要返回不同的数组)


对于调试,如果改为使用
{{what_is_x|json}
,则在数组更改时还将看到视图更新。(这是因为JsonPipe是有状态的,这会导致角度变化检测在每个变化检测周期对其进行评估。)

我无法复制它,请检查此项,谢谢,您提供的plnkr工作正常。但是这个呢。正如您所看到的,向数组追加值并没有反映出来。问题是
push
不会返回新数组。当变更检测器检测到绑定到它的值具有新的引用时,输入将被更新。看看这个,使用返回一个新数组,因此是一个新引用。通常,我们在ComponentB中有更像这样的模板:
{{{item}
。这是有效的(使用相同的数组引用),因为为数组的每个元素创建了绑定,所以更改检测将注意到是否从数组中添加或删除了项,例如,
push()
@EricMartinez非常感谢,请将其作为答案提交,可能还包括Mark的评论。
<div *ngFor="#item of what_is_x">{{item}}</div>