angular2 - 使用 hidden 隐藏行列答案

【问题标题】：angular2 - hiding the row column using hiddenangular2 - 使用 hidden 隐藏行列
【发布时间】：2017-02-11 17:55:01
【问题描述】：

我只想根据某些条件 if(colValue == "Id") 隐藏表格中一行的最后一列“Id”。

<thead>
<tr>
  <th *ngFor="let colValue of headerRow" [hidden]="colValue == Id">{{colValue}}</th>
</tr>

下面是行列。

没有 |日期 |姓名 |类型 |状态 |余额 |评论 |身份证 |

我不想隐藏但想隐藏。我怎样才能做到这一点？谢谢

【问题讨论】：

【解决方案1】：

您可以创建 css 样式，然后将 class css 绑定到元素

.hide {
  display: none;
}

然后在模板中：

<th [class.hide]="colValue == Id"></th>

避免使用hidden 属性，当你绑定到主机时它可能会导致错误。而hidden 将添加display: none !important。

【讨论】：

【解决方案2】：

我看到您正在尝试创建一个表格组件。我建议不要这样做。您最终可能会在 javascript 而不是 html 页面中拥有大量与 gui 相关的代码。我能问一下为什么它需要隐藏吗？为什么 *ngIf 还不够？

【讨论】：

当我有更多行时，如果我单击任何一行，我将获得存储在每个表行的最后一列中的“id”值。从那个 'id' 我将显示更多结果（例如向下钻取）。
您不需要将它放在 html 元素中来执行此操作：这是一个示例。 '' 并在控制器中：'$scope.onRowClicked =function(row){var id=row.Id}'。让控制器完成工作

【解决方案3】：

<tr>
  <th *ngFor="let colValue of headerRow" *ngIf="colValue != Id">{{colValue}}</th>
</tr>

【讨论】：