问题标签 [angular-changedetection]

我试图在我的应用程序从 csv 文件加载数据时显示 ngx-bootstrap 进度条。

问题： 用户界面被冻结，直到整个操作结束

我使用 setTimeout 来拆分加载并递归调用它。我还尝试调用 ngZone.run() 和 applicationRef.tick() 和 changeDetectorRef.markForCheck() ...没有任何成功，进度条仅在操作结束时显示为满。

我做了一个更简单的 stackblitz，所以你们可以告诉我如何实现它。我的代码中的 bcs 要简单得多，我将其放入服务中，然后通过 observable 获得结果。但如果这至少有效，我会知道我做错了什么。 https://stackblitz.com/edit/angular-gzdylf

我知道这个问题有几个线程，但建议的修复对我不起作用。数据正确显示然后很快消失。

据我了解，需要激活一轮变更检测。我用过：

但错误仍然存​​在。如果我将 this.cdr.detectchanges() 调用添加到 increment() 方法，它会产生一个循环并超出最大调用堆栈。

组件.html：

相关组件.ts：

我的目标是让每个子项目显示在表格中

如何在角度 5 的变化上获取复选框单击事件我使用了以下代码

html代码

ts代码

我收到错误

错误类型错误：无法读取未定义的属性“已检查”

请帮我解决

我非常了解 Angular 的更改检测是如何工作的，以及我们如何使用 OnChanges 挂钩来检测@Input属性更改，以及订阅 ngModel valueChanges 例如指令或组件等。

谁能解释这里发生了什么：

# 自定义指令：

假设我们有一个自定义指令 myNumber，它有一个 @Input() 属性 ngModel：

• 在上面的示例中，我将订阅设置为@Input属性 ngModel 和指令的模型对象更改。模型值更改时，应将更改记录在控制台中。

# 组件的模板：

• 我们在三个输入元素上应用了 myNumber 指令，每个输入元素都有 ngModel：number1、number2、number3。

• 最后一个输入在 blur 事件上调用 calculate() 方法。

# 组件的打字稿：

• 每次模型更改后，我都会在 calculate() 方法中记录一条消息。
• 指令正在侦听 ngModel 更改，它还将为每个模型值更改记录两条消息。

＃ 问题：

Angular 将执行calculate()方法，更改所有三个模型，然后检测更改并在指令中触发 cd 钩子：

# 解决方案我想简化：

在组件中，我们可以changeDetection()在每次模型更改后调用该calculate()方法。这将自动触发指令的变更检测钩子。

• 这样 Angular 将立即更改模型并在指令内调用更改检测钩子。

＃ 问题：

ref.detectChanges()如何在每次模型更改后立即实现并更改检测而无需手动编写？

我希望这个例子对所有遇到同样问题的人有用

我正在开发一个 Angular 应用程序，ngOnChanges当组件的输入发生更改时，我会使用它来获得通知。在我的情况下，它不会被触发，因为我有一个嵌套对象数组作为组件的输入。

我有一个组件，其中我使用两个使用FormControl相同 parent 的两个子组件FormGroup。我将value第一个 formControl 的 传递给第二个子组件，但是由于在数组修改时没有发生更改检测，因此我无法在第二个子组件的 Input 中获取新值。

这是我的代码：

这是模板文件：

对第一个子组件的表单控件所做的任何更改都不会触发ngOnChanges第二个子组件，因为它绑定的是数组引用而不是数组内容。因此，对数组的任何对象所做的任何更改或对数组本身所做的任何更改都不会更改数组引用，因此ngOnChanges()不会被调用。

一个可能的解决方案可能是使用ngDoCheck. 但它可能会产生可怕的代价，因为它被频繁调用。即使我应该使用IterableDiffersand ，它也会变得很重KeyValueDiffers。

另一种解决方案可能是订阅valueChanges第一个 formControl，但我无法弄清楚为什么它似乎无法正常工作，有时它会错过一些更改......

在我的情况下，最好的解决方案是什么？

我有一个带有一些复杂计算的 getter 属性，为了防止不必要的我changeDetections改为.ChangeDetectionStrategyOnPush

即使在ChangeDetectionStrategy.OnPush对getter视图中触发的每个可能事件（如button clicks.

这在我的应用程序中导致了一些严重的性能问题。有什么方法可以禁用更改检测并仅在需要时触发它？谢谢。

我试图了解使用 ChangeDetectionStrategy.OnPush 的优势。因此，在 OnPush 策略可能有帮助的基本示例中编写了一些组件。
Stackblits：https
://stackblitz.com/edit/angular-stgymt App Co html：

应用成本：

电影公司 html:

和电影公司 html ：

OnDefault 策略，如果我通过按钮更改标题，我期望的是电影组件，它的子组件也应该运行检测机制。但他们不跑。这与 OnPush 的行为完全相同。
我通过 Chrome 开发者工具中的性能监视器检查了这两种情况，并没有看到任何性能成就。
那么使用 OnPush 策略有什么意义呢？谢谢！

我在使用 websocket 和实时显示更改时遇到问题。我有一系列订单。该数组来自NodeJS后端服务器，来自调用ngOnInit()my 方法orderService.getOrders()，该方法通过 REST 调用从后端获取订单。在此之后，订单将使用正确的信息呈现到模板中。

我还使用 websockets 来处理两种类型的事件：（placeOrder当通过 POST 将新订单提交给支持者时）和updateOrder（当现有订单发生更改时）。

这是该代码的相关部分：

这工作正常，如果我可以在这两种方法中看到修改后的数据，console.log()但问题是只有在刷新页面后更改才会反映到模板中。

我已经尝试使用ChangeDetectorRef并调用detectChanges()和结束handle()方法，但没有成功。

如何实现这一点并在我的模板中实时显示新订单或在不刷新页面的情况下显示对现有订单的更改？

编辑：代码的更多相关部分

我已将我的 Angular 应用程序更新为 Angular6。

我注意到我的组件（例如使用管道显示来自 Observable 的数据）被卡住了。我的意思是他们正在工作，但我必须等待很长时间才能自动更新这个组件。

例如，我使用带有标志的身份验证数据存储isLogged。根据这个标志，一些组件正在将<button>内容从登录更改为注销- 我想你明白了。

在以前的 Angular 版本 (5.x) 中，当我登录时，我的按钮立即更新并且内容是注销

目前我必须等待很长时间才能更改此按钮。还有一个奇怪的行为——当我点击这个按钮时，他立即意识到他必须更新，并且出现了注销。

这只是一个例子，但在我的应用程序中有很多这样的组件。

我正在开发一个 Angular 应用程序。我需要在我的一项服务中收听数据集（javascript 对象）的变化。

我熟悉 Angular 的KeyValueDiffers（对象上的侦听器）和IterableDiffers（数组上的侦听器）。如果我想听 Angular-Components 内部的变化，那么：

1. 我将通过实现一个方法DoCheck在我的组件中实现接口。NgDoCheck

2. 我将在方法内部初始化KeyValueDiffers和/或and ，我将检查更改。IterableDiffersNgDoCheck

但是，这种技术在 Angular 服务中不起作用，因为服务没有实现 DoCheck 接口（DoCheck 不是服务生命周期的一部分）。

所以我的问题是如何在 Angular 服务中收听对象/数组的变化？