Angular2模板中隐藏按钮列表首个按钮的简便方法

嘿，这个需求在Angular里有好几种超简便的实现方式，我给你梳理几个最常用的：

• 利用*ngFor的索引结合*ngIf（循环生成按钮的场景）
  如果你的按钮列表是通过*ngFor循环渲染的，直接借助循环的index变量就能轻松过滤掉第一个按钮：

  <div class="button-group">
    <!-- 只渲染索引不为0的按钮，第一个按钮（index=0）会被跳过 -->
    <button *ngFor="let btn of buttonList; let i = index" *ngIf="i !== 0">
      {{ btn.label }}
    </button>
  </div>
  

  这种方式的好处是第一个按钮不会被渲染到DOM里，完全从页面结构中移除，适合不需要保留该元素的场景。

• 用CSS伪类直接隐藏（无需修改模板逻辑）
  如果只是单纯要始终隐藏第一个按钮，不需要动态控制显示状态，用CSS的:first-child伪类是最省事的：

  .button-group button:first-child {
    display: none;
  }
  

  这个方法不需要改动模板代码，只要给按钮组加个类名，通过样式就能隐藏第一个按钮，缺点是按钮依然存在于DOM中，只是视觉上不可见。

• 静态按钮直接添加隐藏指令（非循环场景）
  如果你的按钮是手动逐个写的，直接给第一个按钮加上*ngIf="false"或者[hidden]="true"即可：

  <div class="button-group">
    <!-- *ngIf="false"会直接不渲染这个按钮 -->
    <button *ngIf="false">第一个按钮</button>
    <button>第二个按钮</button>
    <button>第三个按钮</button>
  </div>
  

  这里要注意：*ngIf是完全移除DOM元素，而[hidden]只是通过样式隐藏（可能会被元素自身的display样式覆盖），根据你的需求选择就行。

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