问题标签 [ngonchanges]

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 投票
3 回答
21104 浏览

angular - 为什么 Angular 2 ngOnChanges 不响应输入数组推送

我的角度应用程序遇到了一个问题,我使用输入作为数组,并在点击事件发生时将一个值推送到数组。但是当数组推送完成时 ngOnChanges 不会触发。有没有办法触发 ngOnChange

我的代码是 ts 文件是

我的选择器标签

点击事件代码

0 投票
2 回答
662 浏览

javascript - HTTP 请求后未触发 NgOnChanges

我有一个关于 ngonchanges 没有触发的问题。

我有这个组件:

ngonchanges 将在 selectedConversation 第一次更改时触发。调用 GetMessages 并加载消息数据。之后,当 selectedConversation 更改时,ngonchanges 不再触发。

如果我注释掉对 getMessages 的函数调用,那么每次 selectedConversation 更改时都会触发 ngonchanges。

所以,我不确定 getMessages 中发生了什么会切断 ngonchanges 的触发。请求返回数据,调用结束。有人有想法么?

0 投票
2 回答
4288 浏览

angular - Angular ngOnChanges 不更新视图

TL;DR:ngOnChanges 显示正在检测输入属性的更改,但未更新视图

我正在开发一个 Angular (2+) 应用程序,试图为使用 Observable 的服务完成的异步任务制作进度条。Observable 将数字作为数据推送,以指示已完成任务的百分比。涉及三个部分:Service、ResultsComponent 和 ProgressBarComponent(ResultsComponent 的子级) 基本数据流是:

  1. 从 Observable 推送到 ResultsComponent 的数字
  2. ResultsComponent.percentLoaded 设置为等于这个数字
  3. ProgressBarComponent 使用 percentLoaded 作为 Input 并更新视图

问题是视图实际上并没有被更新。

在 ResultsComponent 我有这个块:

添加 ref.detectChanges() 成功使 OnChanges 挂钩在 ProgressBarComponent 中触发。组件和模板如下图所示:

零件

模板

如您所见,我只是记录更改以进行测试。我已经验证 ngOnChanges 正在触发,并且值是正确的。我读过的所有内容都说“一旦检测到更改,视图就会自动更新”,所以我不知道还能做什么。

有什么建议么?

0 投票
1 回答
10635 浏览

javascript - Angular 4 @Input 属性更新不影响 UI

有 2 个组件:parentComponent 和 ChildComponent,它们在 parent 内部定义。在 parentComponent 中有一个局部变量,用作传递给 ChildComponent 的输入属性的值(使用 getter)。

父组件.ts:

ChildComponent.ts:

问题是:在父组件的某个地方,当特定事件发生时,正在调用函数newPersonArrived(newPerson:PersonData),函数代码如下:

这不会影响带有新人名的 UI!

只有以下有帮助:

这是预期的行为吗?

为什么只有当 personData 初始化为 new Person 时,UI 才会“捕捉”变化?

0 投票
4 回答
3944 浏览

angular - ngOnChanges 挂钩中 SimpleChanges 接口的类型检查

如果我们在当前组件的 ngOnChanges 钩子的 SimpleChanges typescript 参数中进行类型检查,那就太好了。

这将防止我们检查的属性出现错误。

0 投票
1 回答
476 浏览

angular - Angular - 绑定时的 ExpressionChangedAfterItHasBeenCheckedError

我有一个<input>字段和一个组件,它们绑定了一个通用模型。我ngOnChanges()在组件中使用来检查该输入的值,并且我正在更改绑定到该组件中某处的该输入的模型。

假设我们date将变量绑定到<input>和组件。在这种情况下会发生错误:

以下是我的部分代码:

app.component.html

app.component.ts

date-picker.component.ts

0 投票
2 回答
6022 浏览

angular - 当值从选择更改时,不会触发 ngOnChanges

我有下一个html:

我还有下一个组件

而且我不明白为什么当我选择一些值时 dsChange 会以正确的区值触发,但 ngOnChanges() 不是

0 投票
0 回答
622 浏览

angular - 使用@Input 检测对象中的变化值

问题:为什么更改为父中的对象没有显示在子组件中?

废话

当父组件中的对象显示在子组件中时,我很难检测到该对象中的更改值。

父组件模板具有增加值的按钮。

app.component.ts 文件,

child.component.ts

child.component.html

我认为这将与生命周期钩子有关,我只是模糊地熟悉。

github上的代码在这里。谢谢,

0 投票
1 回答
8133 浏览

angular - 服务中的 Angular 4 数据,传递给组件

在服务中有一些数据,并且当我在服务上的对象中有数据时工作得很好,但是现在我已经连接了数据库连接,数据永远不会进入组件。

我希望服务订阅从数据库返回的数据并定义如下调用:

mapPersonFrominput()函数是模拟数据的保留。它与下面的 extractData 基本相同,但来自代码中的静态对象。

generatePerson 看起来像这样:

extractData 只是将输入对象中的值分配给服务的对象结构,handleerror 只是将错误记录到控制台。

我通过从导航组件调用此函数来调用服务以在组件加载之前从组件初始化数据对象:

在应该获取数据的实际组件中,我使用的是 ngOnInit,但我认为我应该使用 ngOnChanges 来初始化组件。这是我目前正在使用的代码,但还没有修复。

getName()只需返回我存储在服务中的对象。

0 投票
4 回答
2840 浏览

angular - ngOnChanges 仅在有操作时工作

我使用 XMLHttpRequest 创建了自己的上传文件组件,一切正常……我唯一的问题是我创建了一个回调方法来更新上传进度,以便用户可以看到百分比。

如果我对进程进行 consolo.log(),我可以看到它是如何从 0 增加到 100。

但是屏幕并没有反映出来……我在那个组件中有这个功能:

而且我有一个方法来获取进度的最新值(从父组件触发)

如果我有模板

所以进度条并没有增加进度,即使在控制台中我可以看到值是“进度”变化..

但是经过很长时间,我发现如果在屏幕的任何部分用鼠标单击,则会触发 ngOnChange,并且进度条会更新...所以如果我在文件上传时开始单击,我会可以看到进度...