Angular 动态显示表中的列

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

这就是显示列的代码的样子-

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

{{result[col]}

现在，我需要给它添加一个条件。如果列名是一个特定的值，如“refId”，则不应显示它

所以，我做了如下的事情

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

{{result[col]}

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

因此，我尝试将*ngIf放在（与*ngFor一起）中，但这似乎是不允许的

---

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

一种方法是使用

包装内部

{{result[col]}

一种方法是用

{{result[col]}

您可以使用*ngFor执行此操作，下面的HTML从列和行中不同的2d数组创建一个表。我在材料中重新写了这篇文章，虽然比较棘手，但看起来不错

{{ratio}}

您可以使用*ngFor执行此操作，下面的HTML从列和行中不同的2d数组创建一个表。我在材料中重新写了这篇文章，虽然比较棘手，但看起来不错

{{ratio}}

您可能应该先过滤

searchResultColumnNames

删除不需要的名称，然后再将其提供给视图。e、 g.

filteredSearchResultColumnNames

在将其提供给视图之前，您可能应该过滤

searchResultColumnNames

删除不需要的内容。e、 g.

filteredSearchResultColumnNames

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

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