问题标签 [angular2-docheck]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1590 浏览

angular - 如何在不造成大量延迟的情况下观察对象数组的变化?

我觉得 Angular 2 中缺少 Angular 1 的一些东西,其中之一就是$watch功能。

OnChanges并且DoCheck应该替换,$watch但我无法使用其中任何一个来获得所需的结果。OnChanges无法收听对象,因此在这种情况下没有用,并且在DoCheck完成这项工作时,它会导致巨大的延迟,因为一旦发生更改,它似乎就会变得很糟糕。

在这里,我有一个包含一堆复选框的组件,每个复选框切换都会导致将一个值添加到数组中,而不是默认true/false功能。

在这个组件中我需要注意的是复选框的状态isDisabled,所以每次它发生变化时我都需要更新.isCheckedcheckbox

就像我说的,它可以工作,但每个复选框切换都有 2-3 秒的延迟,尽管只有 5 个复选框。最好我不希望每次切换复选框时都运行循环,而是仅在isDisabled复选框的状态发生变化时运行。

编辑:有人告诉Observable我可以在这里完成这项工作,但我找不到任何将其应用于此类对象数组的示例。它还需要在不next()手动调用其方法的情况下触发,因为它必须侦听正在发送的数组的外部更改。

编辑 2:我创建了一个不显示滞后的 plunkr,可能是因为在我的应用程序中我还有其他可能对延迟产生影响的东西。但是,plunkr 清楚地表明似乎有问题,因为我console.log(true)ngDoCheck()函数中放置了 a 并且它运行了很多次。这不是故意的,如果是的话,那真的很奇怪。

这是 plunkr:https ://plnkr.co/edit/dJVnqbrredDyWTXNDzDK?p=preview

我怎样才能做到这一点?

0 投票
0 回答
346 浏览

typescript - Angular2 解开生命周期(ngDoCheck)?

我将来自 2 个 api 调用的 2 个响应合并为一个。完成2个响应后,应触发合并功能。

我已经设法通过 ngDoCheck() 做到这一点,如下所示:

如您所见,我检查响应是否在其中,并检查“this.peopleShown”布尔值。在构造函数中,我将其设置为“假”。我这样做的原因是因为我不希望每次发生小事情时都运行该函数(例如,当用户与站点交互时)。

使用我的解决方案,ngDoCheck() 在成功运行一次后没有任何影响,因此它按我想要的方式工作。我唯一担心的是生命周期钩子仍然被钩住(就像一个事件监听器,它一直在监听,但不做任何事情)。性能方面不是我认为的最佳解决方案?

我的问题
是否有可能以任何方式解开 ngDoCheck() ?
ngStopCheck(), 什么的..

0 投票
1 回答
1632 浏览

angular - Angular2 KeyValueDiffers 在初始化后检测到更改而不更改对象

我有一个表单,我有一个 js 对象作为模型。我想检测对象的变化,通知用户需要保存。

为了实现这一点,我目前使用KeyValueDiffers. 它还可以根据需要检测每一个变化。虽然我有一个不想要的效果。

表单是一个自己的组件,我将设置要修改的对象,@Input()它调用一个init()方法,该方法也KeyValueDiffers用新对象初始化。

初始化后,KeyValueDiffers我立即收到更改通知,尽管我用来初始化差异的对象没有更改。为什么会这样?我一无所知...

编辑

这是我得到的改变事件 在此处输入图像描述

这似乎是从 null 到 object 的变化。但是,当我已经KeyValueDiffers用对象初始化时,为什么会发生这种变化?

0 投票
2 回答
6254 浏览

angular - 数据源更改时Angular 2子组件不更新

我创建了一个表格组件,它根据我传入的配置生成一个表格。我知道编写可重用组件可能有更好的方法,但现在这就是我所拥有的。

基本上,该组件采用带有列和数据源对象的配置,然后将列映射到数据源中的属性。

我的问题是,在某些时候我对表的一个数据源进行了更改,例如,我首先清空了数组......

然后我像这样将新数据推送到数据源上......

我的问题是,当我这样做时,表不会使用数据源中的新数据进行更新。

我在我的组件中使用了 ngDoCheck 函数,它确实在我更改数据源时触发,但没有其他任何反应。

这是所有相关代码和标记...

ip 数据表组件

ip-datatable 组件的模板 html

利用 ip-datatable 的组件

ip-datatable 的 HTML 用法

0 投票
2 回答
3294 浏览

angular - Angular2 组件 ngDoCheck 被无休止地执行

我有一个简单的 angular2 组件,它只包含一个带有一些数据绑定到它的ag-grid组件。

我的组件实现了 DoCheck 并且 ngDoCheck 方法在组件中实现。

我意识到 ngDoCheck 函数总是在无休止地运行。

关于这个问题的任何解释。

0 投票
1 回答
631 浏览

angular - Angular 2 - 如何在 ngOnChange 中修改输入 B(通过更改输入 A 触发)

我有一个带有输入和变量的组件:

问题是,我需要在数据更改时更改输入值。但我有以下错误:

谢谢 !

0 投票
4 回答
64584 浏览

angular - 为什么我们需要`ngDoCheck`

除了简单的通知之外,我似乎无法弄清楚为什么我需要ngDoCheck生命周期钩子,特别是在其中编写代码如何在更改检测方面产生影响。我发现的大多数示例都显示了无用的示例,例如这个,具有一堆日志记录功能。

此外,在生成的类中,除了简单通知之外,我没有看到它用于其他用途:

conmponent/wrapper.ngfactory.js

0 投票
1 回答
230 浏览

angularjs - 深入检查类似于 Angular2 中的 $watchCollection 的更改

我正在使用从父组件传递给子组件的对象数组。当新项目被推送到数组或数组中现有对象之一的属性发生更改时,它不会触发ngOnChanges使用此变量的组件(父/子/兄弟组件)。

在 AngularJS$watchCollection中,我们可以使用它来监视复杂的对象。Angular2+ 有类似的东西吗?

如何进行类似于$watchCollectionAngular2 + 的深度检查?

我熟悉 AngularJS,但不熟悉 Angular2 +。

更新:
按照@Shirish Patel 的建议here,我发现虽然变量的变化在各处得到反映,但该ngOnChanges函数没有被触发。为什么会这样?我需要触发此功能,以便我可以处理更改值的其他操作。

0 投票
2 回答
56 浏览

angular - ngDoCheck VS 使用函数作为属性值 - 性能差异

我在网页中有一个锚标记,其 href 值取决于属性不受此组件控制的服务。服务详细信息是异步填充的。

为了获取服务详细信息并创建 href 值,我想到了两种方法。 我的问题是 - 在性能方面哪个更好?什么应该是更好的选择?

使用函数作为 href 属性

这会导致函数被连续调用。

使用 ngDoCheck

感谢您阅读到这里。任何指导表示赞赏

0 投票
1 回答
28 浏览

javascript - 如何使用 DoCheck [Angular] 在月份选择器上反映/突出显示手动输入的月份

我需要你的帮助。因为一个简单的事情,我真的被阻止了。我也创建了一个 stackblitz,但首先我会解释这个问题。挺复杂的,请多多包涵。我创建了自己的时间范围选择器。有效范围是:02-01-2019 - 09-01-2020。格式为mm-dd-yyyy. 我为此创建了一个适当的用户界面。可以通过两种方式进行选择:

  1. 通过点击月份。[此功能完美运行]
  2. 通过手动输入日期[这不起作用。在这里我需要帮助]

我也在使用以下方法进行基本验证moment

  1. 有效年份为 [2016, 2019]
  2. startRange不应该在endRange'
  3. 格式应该是mm-dd-yyyy

注意:startRangeendRange分别是 start end end range 的输入字段的两个[(ngModel)]绑定变量。

monthpicker.component.html

以下是monthpicker.component.ts中重要方法的列表:

  1. onClick(indexClicked)- 每当单击月份名称时都会调用此方法。这是用于使用鼠标单击进行选择。到目前为止,它工作正常。
  2. triggerReflection()- 当我通过键盘输入日期时,应该调用此方法。这将调用validate(startRange,endRange)将检查上述标准的验证方法。如果两个范围都很好,那么 finallymonthReflection()会被调用,它实际上会反映月份选择器托盘上的选择。

这是代码:

但反射并没有发生。我检查了很多解决方案。我正在使用DoCheck,因为我希望在输入日期时进行验证:

如果范围有效,我希望自动反映月托盘上的范围。我不想使用(keydown)=triggerReflection(),因为那样我将不得不按一些键。我不想要那个。这是堆栈闪电战。请找到组件monthpicker。这只有我们需要解决。

随时询问更多信息。请帮我。我尝试了很多解决方案,现在 Stackoverflow 是我最后的希望。