如何使用ngFor

时间:2017-07-31 07:24:00

标签: html angular

我试图以角度2显示表格中的特定列。所以我的表格元素如下所示:

<table class="ui single line table" id="tablej">
    <tbody>
        <tr *ngFor="let row of data;let i=index">
            <td *ngFor="let val of row;let j=index" >
                <div *ngIf="j<=2 || j==9 || j==17||j==20||j==21">
                    {{val}}
                </div>
            </td>
        </tr>
    </tbody>
</table>

我为跳过的列获取空格,我的表变得不均匀。有没有办法显示特定列而忽略其余列?

1 个答案:

答案 0 :(得分:0)

您可以将tr包装在模板标签中以显示或不显示该列:

   <template *ngFor="let row of data;let i=index">
      <tr *ngIf="condition to display this column">
        <td *ngFor="let val of row;let j=index" >   
          <div *ngIf="j<=2 || j==9 || j==17||j==20||j==21">
            {{val}}
           </div>
        </td>
      </tr>
   </template>

条件行可能是:

 <template *ngFor="let row of data;let i=index">
          <tr *ngIf="displayRow(row)">
            <td *ngFor="let val of row;let j=index" >
                {{val}}
            </td>
          </tr>
 </template>

 public displayRow(row):boolean {
    return row.length <= 2 || row.length == 9 || row.length == 17 || row.length == 20 || row.length == 21 
 }

希望有所帮助