当前位置: 首页 > 知识库问答 >
问题:

Angular 2:如何检测数组中的变化?(@输入属性)

乐欣可
2023-03-14

我有一个父组件,它使用ajax请求检索对象数组。

该组件有两个子组件:一个以树结构显示对象,另一个以表格格式呈现其内容。父元素通过@input属性将数组传递给它们的子元素,子元素可以正确地显示内容。一切如预期。

当您更改对象中的某些字段时,就会出现问题:子组件不会收到这些更改的通知。只有当您手动将数组重新分配给其变量时,才会触发更改。

我已经习惯了使用Knockout JS,我需要获得类似于observeArray的效果。

我读过一些关于DoCheck的东西,但我不知道它是如何工作的。

共有3个答案

计和顺
2023-03-14

阅读以下文章,不要错过可变对象和不可变对象。

关键问题是您改变了数组元素,而数组引用保持不变。Angular2变化检测仅检查数组引用以检测变化。在理解了不可变对象的概念之后,您就会明白为什么会有问题以及如何解决它。

我在我的一个项目中使用redux store来避免这种问题。

https://blog . thoughtram . io/angular/2016/02/22/angular-2-change-detection-explained . html

马安邦
2023-03-14

您始终可以通过将数组与空数组合并来创建对数组的新引用:

this.yourArray = [{...}, {...}, {...}];
this.yourArray[0].yourModifiedField = "whatever";

this.yourArray = [].concat(this.yourArray);

上面的代码将改变数组引用,并触发子组件中的OnChanges机制。

蒋畅
2023-03-14

OnChange生命周期挂钩仅在输入属性的实例更改时触发。

如果要检查输入数组中的元素是否已被添加、移动或移除,可以在< code > doc check 生命周期挂钩中使用IterableDiffers,如下所示:

constructor(private iterableDiffers: IterableDiffers) {
    this.iterableDiffer = iterableDiffers.find([]).create(null);
}

ngDoCheck() {
    let changes = this.iterableDiffer.diff(this.inputArray);
    if (changes) {
        console.log('Changes detected!');
    }
}

如果您需要检测数组内对象的变化,您将需要遍历所有元素,并为每个元素应用KeyValueDiffers。(您可以与之前的检查并行执行此操作)。

更多信息请访问这篇文章:检测Angular2中数组内部对象的变化

 类似资料:
  • 我有一个角度组件,它有一个输入< code>Person 在这个组件的父组件中,如果我替换了作为子组件输入的对象,

  • 我们将创建一个简单的来显示一个电影的信息。 这个应用程序将只包含两个组件:MovieComponent显示有关电影的信息和MainComponent,它使用按钮来保存对电影的引用以执行一些动作。 我们的AppComponent组件将有三个属性:应用程序的slogan,电影的title(标题)和(主角)。 最后两个属性将被传递到模板中引用的MovieComponent元素。 在上面的代码片段中,我们

  • 问题内容: 我有一个带有正负值的numpy数组。 我想创建另一个数组,该数组在发生索引变化的每个索引处包含一个值(例如,如果当前元素为正,而前一个元素为负,反之亦然)。 对于上面的数组,我希望得到以下结果 或者,可以使用数组中发生符号变化的位置列表或布尔值列表(而不是0和1)代替。 问题答案: 就像是 现在,numpy.roll进行循环移位,因此,如果最后一个元素的符号与第一个元素不同,则sign

  • 在ts 中禁用... 我只想禁用基于<code>true</code>或<code>false</code>的输入。 我尝试了以下几点:

  • 问题内容: 我有一个使用ajax请求检索对象数组的父组件。 该组件有两个子组件:一个子组件以树结构显示对象,另一个子组件以表格格式呈现其内容。父级通过@input属性将数组传递给其子级,它们会正确显示内容。一切都如预期。 当您更改对象内的某些字段时,会发生问题:子组件不会收到有关这些更改的通知。仅当您手动将数组重新分配给它的变量时,才会触发更改。 我已经习惯了使用Knockout JS,并且需要获

  • 内部父级 在某些触发器事件上,父级更改这些属性(作为子级的输入) 父Ts 即使在更改输入值后,这种情况也只发生一次 儿童ts 请帮助,如果我可以直接在html中使用输入属性,那么我怎么可以对其进行更改?帮助我了解输入更改时如何通知?