在父母Angular2更改使用数组输入属性时没有反映在孩子 [英] Angular2 change in parent not reflected in child when using array input property

问题描述

假设我们有一个组件一样的子组件的父组件和B组分。这孩子是由父母提供的输入 what_is_x 。事情是这样的：

有关父：

  @Component（{
  选择：CMP-A'，
  指令：以componentB]
  模板：`＆LT; CMP-B [乜是-X] =X＆GT;＆LT; / CMP-B＆GT;`
}）
出口ComponentA {
  公共X：任何= [1，2，3];
  构造函数（）{
    的setTimeout（（）=＆GT; this.x.push（10），2000年）;
  }
}
 

对于孩子：

与输入what_is_x

  // B组分
@零件（{
  选择：CMP-B'，
  模板：`{{what_is_x}}`
}）
出口以componentB {
  @input（'乜是-X'）公共what_is_x：任意;
}
 

我的问题是，如果父变 X 通过一些手段，不会对孩子得到新的值更新？据开发者指南（尚未公布），在组件通信一章;这应该！但它没有更新我，尝试了所有的测试版到现在（0,1,2）

解决方案

  

默认的变化检测算法寻找由整个变化检测运行基准进行比较绑定属性值的差异。 - doCheck（）API文档

因此​​，作为@Eric在评论中提到的，你看不到你的任何视图更新的原因是因为你只绑定到你的模板和ndash的数组; {{} what_is_x} ＆ndash的;而且由于阵列的参考的不当我们修改数组更改（例如，使用推（）），变化检测没有检测到任何变化。

如果这真的是你的使用情况，请执行@Eric建议，并返回一个不同的数组，然后更改检测会注意到数组引用已经改变了。

一般情况下，我们的模板结合到所述阵列的各个项。例如，

 ＆LT; D​​IV * ngFor =＃what_is_x项目＆GT; {{}项}＆LT; / DIV＆GT;
 

由于没有对数组的每一项创建绑定，如果我们添加或删除或修改项目，变化检测会发现（我们并不需要返回不同的阵列）。

有关调试，如果改用 {{what_is_x | JSON}} ，你还会看到视图更新阵列更改时。 （这是因为JsonPipe是有状态的，这会导致角变化检测来评估它的每一个变化检测周期）。

Say we have component A as the parent component and component B as the child component. The child has an input what_is_x that is supplied by the parent. Something like this:

For the parent:

@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);
  }
}

For the child:

// component B with input what_is_x
@Component({
  selector: 'cmp-B',
  template: `{{what_is_x}}`
})
export ComponentB {
  @Input('what-is-x') public what_is_x: any;
}

My question is, if the parent changed x by some means, does the child get updated with the new value? According to the "Component communication" chapter in the developer guide (not released yet); it should! but it's not updated for me, tried all betas up till now (0,1,2)

解决方案

The default change detection algorithm looks for differences by comparing bound-property values by reference across change detection runs. -- doCheck() API doc

So as @Eric mentioned in a comment, the reason you are not seeing any updates in your view is because you are only binding to the array in your template – {{what_is_x}} – and since the array reference does not change when we modify the array (e.g., using push()), change detection does not detect any changes.

If this is really your use case, do as @Eric suggests and return a different array, then change detection will notice that the array reference has changed.

Normally, our templates bind to individual items of the array. E.g.,

<div *ngFor="#item of what_is_x">{{item}}</div>

Since there is a binding created for each item of the array, if we add or remove or modify an item, change detection will notice (and we do not need to return a different array).

For debugging, if you instead use {{what_is_x | json}}, you'll also see the view update when the array changes. (This is because the JsonPipe is stateful, which causes Angular change detection to evaluate it every change detection cycle.)

这篇关于在父母Angular2更改使用数组输入属性时没有反映在孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！