Angular *ngIf 异步作为具有多个条件的变量在同一级别上不起作用

Question

我正在尝试重构我的代码

<ng-container *ngIf='taskOutputs$ | async as taskOutputs && taskOutputs.outputs.length; else neverImportedOrLoading'>

我得到了Unexpected token &&, expected identifier

我应该绝对将其拆分为子ng-container HTML 项目吗？ 像下面这样？

<ng-container *ngIf='taskOutputs$ | async as taskOutputs && taskOutputs.outputs.length; else neverImportedOrLoading'>
  <ng-container taskOutputs.outputs.length; else neverImportedOrLoading'>
  </ng-container>
</ng-container>

编辑

这样做（添加() ）

<ng-container *ngIf='(taskOutputs$ | async as taskOutputs) && taskOutputs.outputs.length; else neverImportedOrLoading'>

得到另一个错误：

Missing expected ) at column 23 in [(taskOutputs$ | async as taskOutputs) && taskOutputs.outputs.length; else neverImportedOrLoading]

Answer 1

我建议使用两个 ng-container

<ng-container *ngIf='{tasks:taskOutputs$ | async} as data'>
   <ng-container *ngIf="data.tasks && data.tasks.length else neverImportedOrLoading">
        ...see that you need use data.tasks.., e.g.
        <div *ngFor="let task of data.tasks">
             {{task.taskId}}
        </div>
   </ng-container>
</ng-container>

看到第一个条件{task:taskOutputs$|async}它总是满足