Angular如何按条件显示指定列并修复表头重复渲染问题？

核心问题修正 #

1. 修复表头重复渲染：把*ngFor从<tr>标签移到<th>标签上，确保表头只有一行，列单元格循环生成，避免每行只渲染一个列的错误结构。
2. 修正条件判断逻辑：把ngIf里的First加上单引号，变成'First'，确保是字符串值比较，而非错误地引用变量。

具体代码实现 #

场景1：Last是独立于columns数组的额外列

如果Last列不在原columns数组中，需要单独添加并控制显示：

<tr>
  <!-- 循环渲染原有列 -->
  <th *ngFor="let col of columns; let i = index">{{ col }}</th>
  <!-- 当索引为1的列名称是'First'时，显示Last列 -->
  <th *ngIf="columns[1] === 'First'">Last</th>
</tr>

场景2：Last已在columns数组中，需控制是否渲染

如果Last本身就在columns数组里，循环时判断是否满足显示条件：

<tr>
  <th *ngFor="let col of columns">
    <ng-container *ngIf="col !== 'Last' || columns[1] === 'First'">
      {{ col }}
    </ng-container>
  </th>
</tr>

额外优化（避免数组越界）

如果columns数组长度可能不足2，建议加安全导航操作符防止报错：

<th *ngIf="columns[1]?.trim() === 'First'">Last</th>

内容的提问来源于stack exchange，提问作者Pinky