问题标签 [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 投票
1 回答
158 浏览

html - 角度 - 模糊事件未重置值

我有一个搜索栏功能,ngOnChanges用于检测搜索词的变化,使我能够过滤一些数据。但是,如果我再次使用之前的搜索词值,则不会捕获此更改。现在我知道这是有道理的,因为实际上搜索词属性没有变化。

似乎当我使用搜索栏中的“x”清除按钮时,我可以再次使用相同的搜索词。但是,如果我要从搜索栏中删除焦点然后尝试重复搜索词,则它不起作用。

我的.ts:

搜索栏.ts:

对于搜索栏 .html:

提前致谢。

0 投票
1 回答
45 浏览

subscribe - ngOnChange 仅在订阅后单击屏幕上某处后触发

我有以下组件。家长:

我的子组件如下:

我的问题是,我注意到 ngOnChange 函数只有在我单击屏幕上的其他位置后才会被调用,即使回调函数 (onAccountChange) 已完成并且 availableInstrument 已从 api 调用中填充。我希望在从 api 调用更改输入数据后立即调用 ngOnChange 函数,而不必单击屏幕上的其他位置。如果我在回调函数中对输入值进行硬编码,我会看到 ngOnChange 在子组件中被立即调用,但在它位于 subscribe 块中时却没有。

太感谢了!

0 投票
1 回答
42 浏览

arrays - Angular:处理 ngFor 中的对象更改,强制打印

我有app.component一个对象列表

HeroComponent是_

我的问题是,即使通过在 中分配更改的英雄app.componentset hero内部hero.component也不会被调用,因此showAlias在示例中没有更新,我在hero.component.

我是否需要通过分配整个数组来强制 ngFor?

也许解决方法可能是从数组中删除对象然后再次插入?听起来像无用的计算。

注意:这只是一个例子,这不是我真正在做的事情,所以像

更新 onHeroClick 方法中的 showAlias 属性

或者

在 hero.component 中分配 hero

不幸的是,没有解决问题。我需要在外部进行更改,因为会发生其他事情。

是否可以将检测更改onPush为手动检查并标记为另一种选择?

闪电战 ==> https://stackblitz.com/edit/angular-ivy-kpn3ds

0 投票
0 回答
55 浏览

angular - ngDoCheck 不为​​具有项目数组的对象触发

我在 ngDoCheck 的帮助下监听对象属性的变化实现如下

选择设置在哪里

属性 valuesToSelect 是一个项目数组,本质上是动态的。[项目可以添加到从列表中删除以及项目可以更新]

ngDoCheck 初始化如下

}

pageSettings 的更新发生在组件内部的不同位置,例如表格单元格的单击事件或复选框更改事件等

这会触发除数组 valuesToSelect 之外的所有属性更改。每当我添加新项目或删除属性 SelectionSettings.valuesToSelect 的项目时,都会检测到更改。但是如果我们更新 SelectionSettings.valuesToSelect 中的现有项目,ngDoCheck 不会检测到任何更改。

如何检测或监听 SelectionSettings 的所有属性以及子数组属性的变化

0 投票
1 回答
97 浏览

angular - 角度与不尊重 OnChanges 的画布元素结合

看到这个堆栈闪电战:https ://stackblitz.com/edit/angular-ivy-wecw7p?file=src%2Fapp%2Fcanvas%2Fcanvas.component.ts

我有一个包含子 CanvasComponent 的常规 AppComponent(使用“和弦”选择器)。app 组件创建一个 Chord 对象并将其传递给子画布组件:

Chord接口目前只有一个Name字符串属性,该名称使用<input>字段显示在 AppComponent 中,并使用{{chord.Name}}. 到现在为止还挺好。

在我的画布组件中,我还渲染了一个<canvas>元素并在其中显示和弦名称。

问题是,当我使用输入字段更新和弦名称时,画布组件中的名称也会发生变化,但不会在画布元素内部发生变化。

在此处输入图像描述

这是因为画布需要重新绘制,足够公平。我已经实现OnChanges了,我需要重新绘制我的画布,但它没有受到任何影响。

如何确保在更新父 Chord 对象时,画布也将被重绘?

并且欢迎任何关于代码改进的提示,刚开始使用 Angular :)

0 投票
2 回答
27 浏览

angular - Angular:从输入()获取更改

我有一个名为 ftn-popin-opener 的组件

其中 selectedValue 是 Input()

在我使用 ftn-popin-opener 的另一个组件中,我想检测每次 Input() selectedValue 何时更改:

我尝试使用 ngOnChanges() 但不起作用

0 投票
0 回答
166 浏览

html - 以角度将数据从父组件传递到子组件

我有 2 个组件。我想将数据从父组件传递到子组件并根据父组件中的下拉选项选择生成子 html。

这是我的父组件 html

这是我的父组件类

基于这种onItemSelect(event: any)方法,我想为this.info.

这是我的子组件文件

这是表格

在此方法中选择值后onItemSelect($event)。我可以在子组件中看到值console.log(this.info) 但是子组件 html 没有加载。这是什么原因以及如何根据下拉值选择加载子组件 html。

0 投票
0 回答
152 浏览

angular - 为谷歌地图动态设置纬度并添加标记:角度12

我在角项目(ngx-google-places-autocomplete and angular/google-maps)中使用谷歌地图。功能就像用户可以选择位置并存储其纬度和经度。现在取决于纬度,长期存储,我需要在该坐标上显示谷歌地图和标记。

HTML

ts

上面的代码每次都显示默认纬度、经度设置的地图。 myLat, myLong变量总是采用默认值。它不会用我在getDetails函数中设置的数据库值覆盖。作为 Angular 的初学者,我不确定如何实现这一点。

我应该如何设置数据库获取的纬度,长谷歌地图并在上面显示标记?

请帮助和指导。

0 投票
1 回答
43 浏览

angular - 为什么您可以直接从 SimpleChange 对象访问角度 ngOnChanges SimpleChange 属性而不使用索引

我正在使用 ngOnChanges,并且已将 SimpleChange 参数设置如下。为什么我可以使用 changes.currentValue 直接访问我的输入属性,而不必使用索引获取属性?两者都工作,我很困惑为什么?

0 投票
1 回答
89 浏览

angular - 为什么在只有一个输入变量的子组件中调用 ngOnChange 两次

我有一个接受一个输入变量的子组件。子组件使用 ngOnChanges 以便对输入变量的任何更改都会触发更改。

一切正常,但是,我看到每次父组件加载时都会调用 ngOnChanges 两次。

示例代码:

父组件

子组件 HTML

子组件 TS