Angular模板变量操作问题：如何实现0-8连续索引访问数据

方法1：直接计算全局索引 #

不用额外声明变量，利用外层循环的i和内层循环的j直接计算出全局索引：i * 3 + j，这样就能覆盖0到8的所有位置。修改后的模板代码如下：

@for (i of [0, 1, 2]; track i) {
  <div class="row">
    @for (j of [0, 1, 2]; track j) {
      <div class="col-12 col-sm-6 col-md-4">
        <a
          [routerLink]="[
            mostViewedArticles[i * 3 + j].category +
            '/' +
            mostViewedArticles[i * 3 + j].id +
            '/' +
            mostViewedArticles[i * 3 + j].title
          ]"
        >
          <h5>{{ i * 3 + j + 1 }}. {{ mostViewedArticles[i * 3 + j].title }}</h5>
        </a>
      </div>
    }
  </div>
}

方法2：在组件类中预处理二维数组 #

把一维的mostViewedArticles转成3行3列的二维数组，模板里直接遍历二维数组，逻辑更清晰。

在组件的.ts文件中添加：

mostViewedArticlesRows: Article[][] = [];

ngOnInit(): void {
  // 假设Article是你的文章类型
  const arr = this.mostViewedArticles;
  for (let i = 0; i < arr.length; i += 3) {
    this.mostViewedArticlesRows.push(arr.slice(i, i + 3));
  }
}

然后模板代码改成：

@for (row of mostViewedArticlesRows; track row; let rowIndex = $index) {
  <div class="row">
    @for (article of row; track article.id; let idx = $index) {
      <div class="col-12 col-sm-6 col-md-4">
        <a
          [routerLink]="[
            article.category +
            '/' +
            article.id +
            '/' +
            article.title
          ]"
        >
          <h5>{{ (rowIndex * 3) + idx + 1 }}. {{ article.title }}</h5>
        </a>
      </div>
    }
  </div>
}

方法3：用单个循环结合Bootstrap自动布局 #

既然用了Bootstrap的网格类，其实不需要嵌套循环，单个循环就能实现3列布局，Bootstrap会自动帮你换行：

<div class="row">
  @for (article of mostViewedArticles; track article.id; let idx = $index) {
    <div class="col-12 col-sm-6 col-md-4">
      <a
        [routerLink]="[
          article.category +
          '/' +
          article.id +
          '/' +
          article.title
        ]"
      >
        <h5>{{ idx + 1 }}. {{ article.title }}</h5>
      </a>
    </div>
  }
</div>

这种方式最简洁，也符合Bootstrap网格的设计思路，不需要手动处理行的拆分。

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