Angular *ngIf async as variable with multiple condition on same level not working

Question

I'm trying to refactor my code

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

I'm getting Unexpected token &&, expected identifier

Should I absolutely split this in a child ng-container HTML item ? like bellow ?

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

Edit

Doing it this way (adding () )

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

got another error:

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

I get Missing expected ) at column 23 in [(taskOutputs$ | async as taskOutputs) && taskOutputs.outputs.length; else neverImportedOrLoading] — infodev
– infodev, Commented Feb 18, 2021 at 15:45

Eliseo · Accepted Answer · 2021-02-18 15:46:52Z

2

I suggested use two 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>

See that the first condition {task:taskOutputs$|async} it's always fulfilled

answered Feb 18, 2021 at 15:46

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

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

Collectives™ on Stack Overflow

Angular *ngIf async as variable with multiple condition on same level not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related