问题标签 [change-detector-ref]

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 投票
2 回答
114 浏览

angular - 在 Angular 中使用 changeDetection.markForCheck() 的正确方法是什么?

markForCheck用来检测我的角度分量的变化(它有changeDetection: ChangeDetectionStrategy.OnPush),最初,我把它放在markForCheck函数的开头,它对我有用,然后我意识到在所有函数动作完成后把它放在更有意义.

在这两种方法中,角度都在检测变化,如果它最初被调用或在动作完成后被调用。

因此,如果有人可以证明使用 markForCheck 的正确方法是什么?

0 投票
1 回答
164 浏览

angular - Angular 11 变更检测问题

我的 html 视图中有一种情况,我正在更新材质滑块的绑定,如下所示:

但是当我的 CHILD COMPONENT 通过this.thresholdValueSub.next(value)调用服务来更新它时;,我得到了经典的变化检测错误:

我以为我会通过async在我看来使用来解决它,但我错了:

然后我想我会按如下方式运行更改检测(在更新值时在我的父组件上):

又错了 !我仍然收到更改检测错误。

我应该发布更多代码以使其更清晰吗?

谢谢你。

*********更新*********

从 html 中删除异步管道,因为我已经在 ts 文件中进行了替换:

订阅时运行更改检测:

不再有变更检测错误!:-)

0 投票
0 回答
14 浏览

angular - 使用 OnPush 更改检测策略,子组件无论如何都会从父组件更新

在我使用的子 (NavBarComponent) 和父 (HeaderComponent) 组件中changeDetection: ChangeDetectionStrategy.OnPush。当我更改完全分离的组件时,这些组件绝不会连接到我的组件,没有任何@Input(),我的组件开始运行该ngDoCheck()方法。

在此处输入图像描述

我的组件在层次结构上甚至不接近我手动更改的组件(我从表单更改字段),它们与标题有关。所以我的问题是:为什么会这样?有了OnPush策略应该不会发生。我的 Header 和 Navbar 组件应该只在输入属性出现时更新。请帮我弄清楚。

0 投票
2 回答
63 浏览

angular - 如何解决Angular中的“检查错误后更改的表达式”?

我想在 Angular 中实现聊天。聊天的每个项目(消息)都有一个标题(标题/名称),应该有一个特定的边距。边距应根据 div 的高度计算。代码看起来像这样。

问题出在 Chrome 浏览器中(在 Mozilla 中没有问题)。控制台错误是:“ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。以前的值:'margin-top:-40.5'。当前值:'margin-top:-40'。”。

在 ts 文件中,我尝试实现更改检测:

如果我在 .ts 文件中添加

错误消失了,但边距小于应有的值。我想摆脱错误并根据 div 高度计算右边距。

我会很感激你有任何想法。谢谢!

0 投票
1 回答
35 浏览

angular - 为什么通过事件处理程序从 html 传递给组件的 HTMLElement 指向错误的 html 元素?

我有一个表格,我想通过点击事件处理程序将表格单元格的 HTMLElement 传递给组件。一开始我有指向正确表格单元格的指针,但是在我手动初始化更改检测后,指针指向错误的单元格(正确单元格的旁边)

我不知道为什么会这样。我在console.log(tableCell)更改检测初始化之前和之后创建了示例(setEditMode中的方法AppComponent

https://stackblitz.com/edit/angular-module-sandbox-btszav?file=src/app/app.component.html

app.component.html

app.component.ts

在此处输入图像描述