时间戳

首页 > 解决方案 > Angular - CSS Grid - 按索引对齐列

html - Angular - CSS Grid - 按索引对齐列

问题描述

我正在尝试制作一个有 4 列和无限行的 CSS 网格。我想做的是让第一列上的文本对齐属性（或者可能是网格对齐属性？）为“开始”，中间两列为“中心”，最后一列为“结束” . 网格中的所有内容都是使用 ngFor 创建的，遍历数组，并将索引存储在变量中，如下所示：

<div class="expander-content">
  <p *ngFor="let service of location.services; let i = index" [ngStyle]="{'text-align': getTextAlign(i)} ">{{service.name}}</p>
</div>

我的扩展器内容的 scss 编写如下：

.expander-content{
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

最后，getTextAlign() 函数：

getTextAlign(index: number): string {
  if (index !== 0 && index % 3 === 0) return 'end';
  else if (index !== 0 && (index % 2 === 0 || index % 2 === 1)) return 'center';
  else return 'start';
}

如您所见，我最初的想法是获取每个项目的索引并根据索引的模确定文本对齐。数学肯定是错误的，如果您愿意，我们非常欢迎您提供帮助！但是，我的主要问题是，有没有更好的方法来使用 css 网格实现这一点？我用谷歌搜索，最好的答案只使用 3 列，并不完全适用于我目前的情况。我对 css 网格很生疏，但我认为我最有可能尝试以艰难的方式实现这一目标。没有试图浏览一门课程来准确找到我需要的东西，我想我会在这里问。

先感谢您！！

标签： htmlcssangular

解决方案

相反，我可以通过在我的组件类中创建一个 string[] 并在对对象进行订阅后迭代 services[] 数组来实现这一点：

private alignments = new Array<string>();

//and, upon subscription

let counter = 0;
for (let i = 0; i < this.location.services.length; i++) {
  if (counter === 0) this.alignments.push('start');
  else if (counter === 1 || counter === 2) this.alignments.push('center');
  else {
    this.alignments.push('end');
    counter = 0;
    continue;
   }
   counter++;
}

//and finally, get the alignment:
getTextAlign(index: number): string {
  return this.alignments[index];
}

我可能会在使用 Map() 之类的东西而不是 for 循环创建数组方面做得更好，但它的笑话就在那里。我仍然没有放弃使用模数，所以如果我找到答案，我稍后会重新讨论！

推荐阅读