Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Async pipe does not trigger change detection #758

Open
xaosaki opened this issue Oct 6, 2021 · 2 comments
Open

Async pipe does not trigger change detection #758

xaosaki opened this issue Oct 6, 2021 · 2 comments

Comments

@xaosaki
Copy link
Contributor

xaosaki commented Oct 6, 2021

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

(Better look example)
I got some strange behaviour. I use subscription on property in store for load some data. And i want use loading indicator. I use OnPush strategy. Async pipe does't trigger changeDetection and do not redraw value in UI. But if i subscribe in component and manually do detectChanges everything will be ok.

Expected behavior

I want use async pipe for my case.

Minimal reproduction of the problem with instructions

https://stackblitz.com/edit/angular-ivy-ytzx8j

  1. Open console
  2. Click on 1st button
  3. You will see true and after 2 seconds false
  4. In UI you will see only false
@xaosaki xaosaki changed the title Async pipe do not trigger change detection Async pipe does not trigger change detection Oct 6, 2021
@malvin-rgba
Copy link

Adding delay(0) to your pagination$ query solves the problem:
https://stackblitz.com/edit/angular-ivy-waj96n?file=src%2Fapp%2Fakita.service.ts

@rohovtsov1
Copy link

rohovtsov1 commented Jun 1, 2023

@xaosaki
This has nothing to do with Angular. This is shitty akita state managment by design.
Here is your problem fully described: #1065

The issue in your example happens this way:

  1. trigger pagination change, [loading = false]
  2. pagination changed, notifying listners via select(), [loading = false]
  3. fetchResult() is called, this.store.setLoading(true) called, [loading = true]
  4. pagination change finally ends, and resubmits previous value, [loading = false]

So you get synchronosly loading = false, loading = true, loading = false. And the final result is false, so you see no changes.
Avoid akita, and use built-in Angular features

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants