当前位置: 首页 > 面试题库 >

角度2:如何检测阵列中的变化?(@input属性)

万俟嘉珍
2023-03-14
问题内容

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

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

当您更改对象内的某些字段时,会发生问题:子组件不会收到有关这些更改的通知。仅当您手动将数组重新分配给它的变量时,才会触发更改。

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

我已经阅读了有关DoCheck的内容,但不确定如何运行。


问题答案:

OnChanges 仅当输入属性的实例更改时,生命周期挂钩才会触发。

如果你想检查是否输入数组中的元素已经被添加,移动或删除,则可以使用IterableDiffers里面DoCheck的生命周期挂钩,如下所示:

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。(您可以与之前的检查同时进行)。



 类似资料:
  • 我有一个父组件(CategoryComponent)、一个子组件(videoListComponent)和一个APIService。 我的大部分工作都很好,即每个组件都可以访问json api,并通过Observables获取其相关数据。 当前video list组件只获取所有视频,我想将其筛选为特定类别中的视频,我通过将categoryId传递给子对象实现了这一点。 CategoryCompon

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

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

  • 我正在编写一个具有属性的角度组件。 我希望能够以编程方式设置此属性,而不是响应任何事件。 问题是在没有浏览器事件的情况下,模板绑定不会更新。 是否有办法手动触发此更改检测?

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

  • 我有一个父组件和子组件,其中父组件通过@Input修饰符将对象传递给子组件。问题是,子级只获取父级数据一次,然后在将来更改传递给子级的父属性后,不会更新该值。