时间戳

首页 > 解决方案 > 如何在遍历angular7中的元素列表时连续显示三个元素？

html - 如何在遍历angular7中的元素列表时连续显示三个元素？

问题描述

在 Angular 中，我需要从项目列表中连续显示 n 个元素。

我已将来自 Angular 的代码粘贴到我尝试过但无法重复<tr>标签的内容上。

<table class="table table-bordered table-striped mb-0 table-hover">
  <tbody *ngFor="let tableColObj of LWTableColumnNames.refLWTableColumnNames; let i=index">
    <tr>
      <td *ngIf="tableColObj.SelectionFlag == true">{{tableColObj.COLUMN_NAME}}</td>
    </tr>
  </tbody>
</table>

List - [e1,e2,e3,e4,e5,e6]

<table>
  <tr>
    <td>e1</td>
    <td>e2</td>
    <td>e3</td>
  </tr>
  <tr>
    <td>e4</td>
    <td>e5</td>
    <td>e6</td>
  </tr>
</table>

标签： htmlangulartypescriptangular7

解决方案

制作满足您需求的数组比拥有复杂的模板要容易得多。

const data = ['e1','e2','e3','e4','e5','e6'];

const group = (array, groupSize) => array.reduce((results, current, index) => {
  if (index % groupSize === 0) {
    results.push([current]);
  } else {
    results[results.length - 1].push(current);
  }
  return results;
}, []);

console.log(group(data, 3));

现在你可以有一个循环循环，一个循环内部单元格。

推荐阅读