如何遍历angular7中的元素列表时如何连续显示三个元素?

时间:2019-06-27 01:32:53

标签: html angular typescript 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>

1 个答案:

答案 0 :(得分:4)

创建一个满足您需求的数组要容易得多,而不是拥有复杂的模板。

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));

现在您可以为行创建一个循环,并为单元格创建一个内部循环。