Conditionally render a LI item in a For loop

Question

I have the following using Angular 7:

<ul>
  <li *ngFor="let status of statuses$ | async" *ngIf="status.name != post.statusName">
    {{status.name}}
  </li>
</ul>

I get the following error:

Can't have multiple template bindings on one element. Use only one attribute prefixed with *

How can I conditionally render a LI item in a loop?

Answer 1

You can only one structural directive on an element to Change your code to

<ul>
<ng-container *ngFor="let status of statuses$ | async">
 <li  *ngIf="status.name != post.statusName">
    {{status.name}}
  </li>
</ng-container>

</ul>

Working stackblitz

Answer 2

separate the ngIf and ngFor. You can't have 2 structured directives on one element

<ul>
  <ng-template  *ngFor="let status of statuses$ | async" > 
    <li *ngIf="status.name != post.statusName">
     {{status.name}}
     </li>
  </ng-template>
</ul>

Answer 3

Try this,

 <ul>
 <li *ngFor="let status of statuses$ | async" >
 <div *ngIf="status.name != post.statusName">
  <p>{{status.name}}</p>
 </div>
 </li>
 </ul>

Answer 4

We Can't use ngif and ngfor together

        <ul>
          <li *ngFor="let status of statuses$ | async" >
            <div *ngIf="status.name != post.statusName">
              <span>{{status.name}}</span>
            </div>
          </li>
        </ul>