带as和let的角异步管道

Question

我有一个正在使用可观察和async管道的存储状态。 我正在使用as语法读取返回的对象。
该对象很复杂，并且具有可观察到的另一个async引用的字段以显示信息。
我可以做以下事情吗？

<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

您可以使用ng-template声明新的变量fileList并使用ng-container等待加载异步数据，然后激活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>

演示

我没有在演示中过滤user.UserId ，但是您可以在将数据分配给fileList作为let-fileList="file[user.UserId]"做到这一点