javascript - 如何有条件地将行添加到 Angular 5的表中

Question

我是 Angular 5 的新手。我的 app.component.ts 中有一个对象数组。我想同时使用 *ngFor 和 *ngIf 创建表行并同时应用条件。基本上类似于

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

但是这是不允许的，并且会显示错误:

Can't have multiple template bindings on one element.

如何实现这一目标？

Answer 1

使用 ng-container( documentaion link ) 作为您的 ngFor。

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