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

angular - 值更改时不触发 ngIf

我有一个简单的 mat-spinner 应该在isLoadingis时触发true。变量按预期更改,但 mat-spinner 不可见。仅当我更改isLoading为 always时才可见true

我错过了什么吗?提前致谢!

app.component.ts:

app.component.html:

实用程序.service.ts:

编辑添加触发setter函数的组件:start.component.ts:

0 投票
2 回答
7695 浏览

angular - 角阵列变化检测

我是 Angular 的初学者,我找不到适合我的问题的解决方案。

我有一个包含表的组件,其中填充了项目列表(列表中的每个项目都在另一个组件中),并且第三个组件包含过滤器。过滤器包含多个复选框和一个过滤器按钮。

我将复选框状态的布尔数组从 filterComponent 通过 itemsListComponent 发送到 singleItemComponent 并且它工作正常。我的问题是更改检测。当我使用不同的 NgDoCheck 时,它总是在我单击复选框和过滤器按钮而不是仅过滤器按钮时起作用。

我尝试了 NgOnChanges 但它只工作了一次,然后它没有看到数组中的值有任何变化。

这是我的 SingleItemsComponent(我认为您不需要其他人来帮助我解决这个问题)。看看这个,请给我看任何解决这个问题的例子。

我为代码中的混乱感到抱歉,但我尝试了很多东西,我什至不记得是什么。谢谢你的帮助。

过滤器组件.ts:

FilterComponent.html 的一部分:

PoLinesCompoenent.ts:

PoLinesComponent.html:

0 投票
2 回答
292 浏览

angular - 角度替换组件

有一种情况是数据是从两个不同的组件发送的;假设OneComponent并且TwoComponent有一个ResultComponent通过Input()装饰器接收这些数据。此外,在ResultComponent数据中使用OnChanges接口合并:

和数据显示在这个组件中,但组件被实例化了两次,数据是双倍的。如何检查数据是否已从其中一个组件发送并仅显示最后发送的数据?

STACKBLITZ => 我想只显示一次结果

0 投票
1 回答
34 浏览

angular - Angularfire2, Firestore Document Retrieval Issue (using .get, possibly related to ngOnChanges)

My application structure has 1 service and 2 components:

Service: Holds all of the firestore connections ViewComponent: Gets a list from the service and displays it ItemManagementComponent: Displays a form and allows the user to add a new entry.

The Issue I have a button in the ViewComponent that (in theory), sends a documentID to the ManagementComponent which then displays that document data in the form, allowing for a user update. Right now, when I click the button I can track the doumentID, and the service return all the way through my application, but I'm not actually getting a document returned. I can run the exact same code with a hardwired documentID, and it works great, so obviously I'm missing something.

Service

View HTML

View Component

ItemManagement Component

So, if I click on the update button on the view HTML, this is what my console shows me: console log screenshot From my perspective, I'm seeing the ID passed to the service, and the service has a properly formatted document response to return.

If I copy a document ID directly from my console log and hardwire it to the updateInventory function on the ItemManagementComponent, and call the hardwired function from the NgOnChanges it works. It's just that somehow when I'm passing in this ID as a variable it's short circuiting.

I had this same updateInventory function working with a slightly different implementation that took a variable, so I'm really stumped. Any help is greatly appreciated!

0 投票
1 回答
429 浏览

angular - ngOnChanges 没有被解雇

我正在运行代码中测试 ngOnChanges 方法。但似乎 ngOnchanges 没有被调用,尽管它可以编译。下面是我的代码。

创建employee.component.html:

创建-employee.component.ts:

表格中使用的模型对象员工为:employee.model.ts:

ngOnChanges 方法根本没有被解雇。有什么输入吗?

0 投票
2 回答
5066 浏览

javascript - 从 Angular 中的 @Input 更新 ngOnChanges 视图

我在 Person 类型的子组件中有一个 @Input 属性,并且我正在通过属性从父组件传递对象

StackBlitz中提供了完整的工作代码

我探讨了以下问题,我明白了他们在答案中所说的内容,但我根据答案尝试了 Object.assign 和其他东西,但它无法在 View 中加载数据。

如何通过@Input 传递对象,一旦对象到达子组件并需要在视图中更新,我该如何进行一些操作?

示例代码:

应用组件

应用组件 HTML

用户组件

用户组件 HTML

@Input一旦我收到对象并需要在 UI 中更新它,我需要进行一些操作。我知道该对象是作为参考传递的,但在这里我尝试过Object.assign并分配了属性,undefined然后适当的对象没有任何工作。

0 投票
2 回答
1079 浏览

angular - 尝试传递新对象时未触发 ngOnChanges 子方法

我有一个将user数据传递给子组件的父页面,如下所示:

父页面ngOnInit()订阅了一个 observable,它返回一个用户对象并设置user变量(我从 中删除了其他不相关的查询combineLatest):

据我了解,ngOnChanges()除非创建新对象,否则不会触发,因此我将新用户对象分配为新对象以app-leaderboard-preview使用传递给组件Object.assign()

这样加载组件,就好了,但是用户的排名是可以改变的,所以当用户向下滑动刷新页面的时候,值应该会更新,但是组件没有更新。我使用下面的代码(几乎是上面的副本)来刷新页面(没有硬重新加载)。

然后运行该parseUser方法来更新使用的user对象app-leaderboard-preview

所以这应该触发 ngOnChanges,因为我正在向组件传递一个“新”对象。我错过了什么?

0 投票
1 回答
2008 浏览

angular - Angular 没有检测到 swiper 幻灯片的变化

我正在使用swiper 库。在上面链接的 API 中,您可以找到mySwiper.activeIndex返回当前选择的幻灯片。我想要做的是在幻灯片更改时更新我的​​服务,以便我的应用程序知道在其他部分选择了哪张幻灯片(通过共享服务)。

所以我想使用的是ngOnChanges它假设检测组件的每一个变化,但它没有检测到幻灯片的变化,因为我的代码没有console.log任何东西。代码:

在此代码中,setTimeout 可以正常工作,并在应用加载 4 秒后向我显示当前选择的幻灯片。但这ngOnChanges(changes) {似乎永远不会被解雇,因为我没有看到任何 console.logs。

为什么 ngOnChanges 不捕捉mySwiper变化?我能做些什么来检测这些变化?

0 投票
1 回答
1501 浏览

javascript - 当用户键入时,NgOnChanges 会覆盖表单控件的值

我有自动完成表单控件:

我从中获取初始值store并将其作为@Input变量传递:

我遇到的问题是:

  1. 组件加载,我valuestore.
  2. 用户在输入文本字段中输入内容。
  3. 用户停止输入 350 毫秒(debounce时间)。
  4. emit重视父母并使用Action+Reducer将值保留在商店中。
  5. this.value$对更改和触发方法Observable做出反应。storengOnChange
  6. 用户继续输入。
  7. 来自store覆盖用户已经键入的值。

例如,用户输入“stri”,然后稍作停顿,然后输入“string”,但“store”值覆盖了他的“string”值,他得到了我之前放入“store”的“stri”值。有没有人遇到过这个?我们提出的唯一解决方案是检查焦点并且不设置新值。

0 投票
1 回答
1327 浏览

angular - Angular 7:ngOnChanges 只触发一次

我不明白为什么ngOnChanges只触发一次。最初设置时。

值的变化不会触发ngOnChanges 任何想法?