6

I have a store state that I'm getting using an observable and the async pipe. I'm using the as syntax to read the returned object.
This object is complex, and has fields that are referenced by another async observable to display information.
Could I do something like the following?

<div *ngIf="(fileObs$ | async) as files; let fileList= files[user.UserId]">
<div *ngFor="let file of fileList">
  ...
</div>
<!-- instead of -->
<div *ngFor="let file of files[user.UserId]">
  ...
</div>
0

1 Answer 1

7

You can use ng-template to declare new variable fileList and use ng-container to wait for asynchronous data to load which then activates the template

<ng-container *ngTemplateOutlet="files; context:{file :fileObs$ | async}"></ng-container>

<ng-template #files let-fileList="file[user.UserId]">

   File List 
   <br>-------
   <div *ngFor="let file of fileList ">
      {{file}}
    </div>
</ng-template>

DEMO

I am not filtering user.UserId in my demo, but you can definitely do that while assigning data to fileList as let-fileList="file[user.UserId]"

Sign up to request clarification or add additional context in comments.

2 Comments

This is nice, but I noticed that your fileObs$ method gets hit dozen of times. So, this wouldn't work well with a API fetch, which is sad.
If this is fetched from an API, you should use the shareReplay operator

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.