带as和let的角异步管道

Question

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>

Answer 1

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]"