Angular *ngIf async作为变量，在同一级别上有多个条件不起作用

Question

我正在尝试重构我的代码

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

我得到Unexpected token &&, expected identifier

我应该绝对分割这在一个子ng-containerHTML项目?

<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}它总是满足