10000 Improve async pipe for single object observables · Issue #12237 · angular/angular · GitHub
[go: up one dir, main page]
Skip to content

Improve async pipe for sing 8000 le object observables #12237

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.

Sign up for GitHub

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

Jump to bottom
Closed
Martin-Luft opened this issue Oct 12, 2016 · 9 comments
Closed

Improve async pipe for single object observables #12237

Martin-Luft opened this issue Oct 12, 2016 · 9 comments
Labels
area: common Issues related to APIs in the @angular/common package feature Issue that requests a new feature freq2: medium

Comments

@Martin-Luft
Copy link

I'm submitting a ...

[x] feature request

Current behavior
Main motivation: print multiple object properties by using the async pipe with 1 network request

For array observables myObjects$: MyObject[] you can use the async pipe in the following way:

<div *ngFor="let myObject of myObjects$ | async">
  <div>{{myObject.property1}}</div>
  <div>{{myObject.property2}}</div>
  <div>{{myObject.property3}}</div>
</div>

The code above will end in 1 network request.

For single object observables myObjects$: MyObject you can use the async pipe in the following way:

<div>
  <div>{{(myObjects$ | async)?.property1}}</div>
  <div>{{(myObjects$ | async)?.property2}}</div>
  <div>{{(myObjects$ | async)?.property3}}</div>
</div>

The code above will end in 3 network requests :(

For sure you could cache the observable .publishReplay(1).refCount() (only 1 network request) but all together it looks odd.

Expected behavior
Add support for a local template variable e.g.:

<div *ngIf="let myObject = myObjects$ | async">
  <div>{{myObject.property1}}</div>
  <div>{{myObject.property2}}</div>
  <div>{{myObject.property3}}</div>
</div>

What is the motivation / use case for changing the behavior?
Beautiful code for printing multiple object properties by using the async pipe with 1 network request.

Please tell us about your environment:
Linux

  • Angular version: 2.0.2
  • Browser: All
  • Language: TypeScript 2.0.3
  • Node (for AoT issues): 6.7.0
@pkozlowski-opensource pkozlowski-opensource added feature Issue that requests a new feature area: common Issues related to APIs in the @angular/common package labels Oct 12, 2016
@pkozlowski-opensource
Copy link
Member

AFAIK @robwormald was thinking about it, good to have an issue tracking this. Thnx for opening.

@DzmitryShylovich
Copy link
Contributor

For sure you could cache the observable .publishReplay(1).refCount()

there's a shortcut - share(). But I agree it would be very very useful.

@DzmitryShylovich
Copy link
Contributor

Duplicate of #2451

@pkozlowski-opensource
Copy link
Member

@DzmitryShylovich I don't think it is direct duplicate. #2451 could be a solution for the issue at hand but:

As such I'm going to keep both issues opened. But it is good to have them linked, thnx!

@olegdunkan
Copy link
Contributor

It will be very useful feature!!!
Now I do this

<div>
  <div>{{(myObjects$.pluck('property1') | async}}</div>
  <div>{{(myObjects$.pluck('property2') | async}}</div>
  <div>{{(myObjects$.pluck('property3') | async}}</div>
</div>

or

<div *ngIf="myObject">
  <div>{{myObject.property1}}</div>
  <div>{{myObject.property2}}</div>
  <div>{{myObject.property3}}</div>
</div>
ngOnInit() {
    this.subscribtion = myObjectsObservable.subscribe(object=>this.myObjects=object); 
}
ngOnDestroy() {
    this.subscribtion.unsubscribe();
}

@DzmitryShylovich
Copy link
Contributor

http://plnkr.co/edit/Sunu2LPQVAaWZvZRcWXb?p=preview

@ericmartinezr ericmartinezr mentioned this issue Nov 14, 2016
Closed
@DzmitryShylovich
Copy link
Contributor

@Martin-Wegner it's now possible with the new syntax #15020
close the issue please, thanks.

@Martin-Luft
Copy link
Author

@DzmitryShylovich thanks for informing me, sounds very good :)

This was referenced Jul 31, 2019
Open
Open
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: common Issues related to APIs in the @angular/common package feature Issue that requests a new feature freq2: medium
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@pkozlowski-opensource @olegdunkan @Martin-Luft @DzmitryShylovich
0