ng if with ngfor in angular-CodePudding

I'm trying to display data in cdkDroplist for drag drop purposes

<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="lists[0].answers" [cdkDropListConnectedTo]="[doneList]"  (cdkDropListDropped)="drop($event)">
    <div  *ngFor="let item of lists[0].answers"  *ngIf="item" cdkDrag>{{item}}</div>
    </div>

i want to hide this div when item contains blank on null values

 <div  *ngFor="let item of lists[0].answers"  *ngIf="item" cdkDrag>{{item}}</div></div>

for that i used *ngIf="item" but this is showing this error :

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

CodePudding user response：

what you can do is wrap the for in a ng-container its a elemant that will not be shown in the dom

<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="lists[0].answers" [cdkDropListConnectedTo]="[doneList]"  (cdkDropListDropped)="drop($event)">
   <ng-container *ngFor="let item of lists[0].answers" >
       <div   *ngIf="item" cdkDrag>{{item}}</div>
    </ng-container>
</div>