Question

我正在使用Angular 4动态显示一组列。因此，只有在运行时我才会知道列的数量以及需要在表格中显示的列数。

这是显示列的代码 -

<tr *ngFor="let result of results">            
                <td *ngFor="let col of searchResultColumnNames"  >
                  {{ result[col] }}
                </td>
</tr>

现在，我需要为它添加一个条件。如果列名是某个值，如'refId'，则不应显示它。

所以，我做了如下

<tr *ngFor="let result of results">            
                <td *ngFor="let col of searchResultColumnNames"  >
                   <div *ngIf='col !== refId'> {{ result[col] }}</div>
                </td>
</tr>

这会隐藏列值，但是会创建一个空的td，这是不需要的。

所以，我尝试将* ngIf放在（和* ngFor一起）中，但似乎不允许这样做。

如何动态呈现结果，还可以隐藏某些列而不创建空的td元素

Answer 1

一种方法是用[{1}}

包裹内部<td>

<ng-container>

Answer 2

您可以使用* ngFor执行此操作，下面的HTML会从2d数组创建一个表，该表在列和行中有所不同。我在Material中重写了这个，这更棘手，但看起来不错。

https://github.com/eltimmo/angular-material-dynamic-table

https://stackblitz.com/edit/angular-dynamic-tables

    <tbody>
      <tr *ngFor="let ratios of gearRatios">
        <td align="left" *ngFor="let ratio of ratios">{{ratio}}</td>
      </tr>
    </tbody>

动态显示表格中的列

2 个答案: