Angular ngFor 和 CSS Grid - 如何检测第一列？答案

【问题标题】：Angular ngFor and CSS Grid - how to detect first column?Angular ngFor 和 CSS Grid - 如何检测第一列？
【发布时间】：2020-09-29 15:33:24
【问题描述】：

我正在尝试将 ngFor 与 CSS crid 一起使用。但是，对于第一列，我需要制作 div 元素并为其着色。

有什么想法可以用ngFor测试它是否是css网格中的第一列吗？

            <div  class="grid">

              <span scope="col">EXAMPLE</span>
              <span scope="col">VALUE</span>
              <span scope="col">TOKEN</span>
              <span scope="col">STATUS</span>

              <span *ngFor="let token of tokens">
                <div
                  class="color-box"
                  [style.backgrouncolor]="token"
                  *ngIf="token === <first column>; else showString">
                </div>
                <span #showString>{{token}}</span>
              </span>

            </div>

export class ColorsComponent {
  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).map(e => e)
  )).flat();

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

.grid > span {
  padding: 8px 4px;

}

【问题讨论】：

标签： angular css-grid

【解决方案1】：

您可以检查您当前的元素索引i 是否是4 的倍数。结合@Derek.W 的答案（谢谢），这应该可行：

<span *ngFor="let token of tokens; let i = index">
    <div class="color-box"
         [style.backgrouncolor]="token"
         *ngIf="i % 4 === 0; else showString">
    </div>
    <span #showString>{{token}}</span>
</span>

您还可以通过使用特定库直接从网格容器元素手动解析 CSS 属性来实现这一点（您绝对可以使用 jQuery 做到这一点）。

恐怕在ngFor 指令中没有其他工具可以正确执行此类操作。

【讨论】：

【解决方案2】：

在ngFor，你可以得到每个项目的索引如下。

*ngFor="let token of tokens; let i = index"

因此您可以使用i 值确定它是否是第一个元素。如果i == 0，则为第一个元素。

【讨论】：