Display table row on some condition angular-CodePudding

I have this tr tag

<tr *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index " *ngIf="data.status=='1'" >
<td>

</td>
<td>
</td>
</tr>

I want to display tr only when *ngIf="data.status=='1'"

but getting this error

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

Any Solution Thanks

CodePudding user response：

Solution 1: Wrap within <ng-container>.

<ng-container *ngFor="let data of list | paginate:{itemsPerPage: 10, currentPage:p} ; let i = index">
  <tr *ngIf="data.status == '1'">
    ...
  </tr>
</ng-container>

Solution 2: Perform the filtering in the component

this.list = this.list.filter((x) => x.status == '1');

<tr *ngFor="let data of list | paginate:{itemsPerPage: 10, currentPage:p} ; let i = index">
  ...
</tr>

Demo Solution 1 & 2 @ StackBlitz

CodePudding user response：

You can use ng-template for that: https://angular.io/api/core/ng-template

Try wrapping the whole thing in <ng-template> and applying the structural directive to it like this:

<ng-template [ngIf]="data.status=='1'">
    <tr
        *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index "
    >
        <td></td>
        <td></td>
    </tr>
</ng-template>