如何在角度5中有条件地向表中添加行

Question

I am new to Angular 5. I have an array of objects in my app.component.ts . I want to use both *ngFor and *ngIf to create rows of a table and apply condition at the same time. Basically something like

<tr *ngFor="let row of rows" *ngIf="row['category']==='M'"><td>...</td><td>...</td></tr>

This is however not allowed and an error is displayd:

Can't have multiple template bindings on one element.

How to achieve this?

Answer 1

Use ng-container ( documentaion link ) for your ngFor .

<ng-container *ngFor= "let row of rows">
   <tr  *ngIf="row['category']==='M'"><td>...</td><td>...</td></tr>
</ng-container>