Angular中结合ngFor与CSS Grid，如何检测第一列？

嘿，这个场景我之前做颜色展示表格时刚好碰到过，给你两种实用的解决方案参考：

方案一：利用索引取余判断（适合扁平化数据） #

你的Grid设置了4列，意味着每4个token元素会组成一行，第一列的元素索引刚好是0、4、8...这类能被4整除的数。所以只需要在ngFor里拿到当前元素的索引，用索引对列数取余等于0来判断即可。

修改后的完整代码如下：

HTML 模板 #

<div class="grid">
  <span scope="col">EXAMPLE</span>
  <span scope="col">VALUE</span>
  <span scope="col">TOKEN</span>
  <span scope="col">STATUS</span>
  <!-- 新增 let i = index 获取当前元素索引 -->
  <span *ngFor="let token of tokens; let i = index">
    <div class="color-box" 
         [style.backgroundColor]="token" 
         *ngIf="i % 4 === 0; else showString"></div>
    <ng-template #showString><span>{{token}}</span></ng-template>
  </span>
</div>

组件类（优化列数维护） #

把列数抽成变量，以后改列数只需要改这一个地方，不用到处找：

export class ColorsComponent {
  gridColumns = 4; // 统一维护列数
  private tokenMap: Array<object> = [
    { example: '#0075DE', value: '#0075DE', name: '$ws-big-stone-A700', status: 'good', },
    { example: '#0075DE', value: '#0075DE', name: '$ws-big-stone-A700', status: 'good', },
    { example: '#0075DE', value: '#0075DE', name: '$ws-big-stone-A700', status: 'good', },
    { example: '#0075DE', value: '#0075DE', name: '$ws-big-stone-A700', status: 'good', },
  ];
  tokens = this.tokenMap.map(e => Object.values(e)).flat();
}

CSS 样式（补充显示效果） #

给颜色块加基础样式，同时完善表格边框：

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid black;
  border-right: 1px solid black;
}

.grid > span {
  padding: 8px 4px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.color-box {
  width: 100%;
  height: 24px;
  border-radius: 4px; /* 可选：增加圆角让颜色块更美观 */
}

方案二：按行渲染（更语义化，推荐） #

其实你不需要把数据扁平化，可以直接遍历tokenMap，按列依次渲染每个属性，这样第一列的颜色块可以直接绑定item.example，完全不需要判断索引，代码可读性更强：

修改后的 HTML 模板 #

<div class="grid">
  <span scope="col">EXAMPLE</span>
  <span scope="col">VALUE</span>
  <span scope="col">TOKEN</span>
  <span scope="col">STATUS</span>
  <!-- 直接遍历原数据，按行生成列元素 -->
  <ng-container *ngFor="let item of tokenMap">
    <span>
      <div class="color-box" [style.backgroundColor]="item.example"></div>
    </span>
    <span>{{item.value}}</span>
    <span>{{item.name}}</span>
    <span>{{item.status}}</span>
  </ng-container>
</div>

这种方式的好处是：

• 代码逻辑更直观，一眼就能看出来每列对应的数据字段
• 后续新增/修改列时，不需要调整索引判断逻辑，直接增减<span>即可
• 避免扁平化数据可能带来的索引计算错误

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