Angular ngFor 和 CSS Grid - 如何檢測第一列？

Question

我正在嘗試將 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;

}

Answer 1

在ngFor ，您可以按如下方式獲取每個項目的索引。

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

因此，您可以使用i值確定它是否是第一個元素。 如果i == 0 ，它是第一個元素。

Answer 2

您可以檢查當前元素索引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指令中沒有其他工具可以正確地做這些事情。