Question

我有一个从1到35的数组：

numbersArray = [1,2,3,4,....,35]

我想创建一个如下所示的html表：

---------------------------
1  |2  |3  |4  |5  |6  |7
---------------------------
8  |9  |10 |11 |12 |13 |14
---------------------------
15 |16 |17 |18 |19 |20 |21
---------------------------
22 |23 |24 |25 |26 |27 |28
---------------------------
29 |30 |31 |32 |33 |34 |35
---------------------------

我使用了以下内容：

<tr *ngFor="let number of numbersArray;">
    <td>{{number}}</td>
</tr>

如何在</td></tr><tr><td>中的6个项目之后添加*ngFor个代码？

Answer 1

如果它必须是一个表并分组成行，你应该让数据代表它。

这是Plunker

数据

let cells = [];
for(var i =1; i <= 40 ; i++){
   cells.push(i);
   if((i % 7) == 0) {
      this.rows.push(cells);
      cells = [];
   }
}

表

  <table>
     <tr *ngFor="let cells of rows;">
        <td *ngFor="let c of cells;">{{c}}</td>
     </tr>
  </table>

Answer 2

您可以为此准备数据或创建自定义管道，如：

@Pipe({ name: 'chunks' })
export class ChunksPipe implements PipeTransform {
  transform(arr: any, chunkSize: number) {
    return arr.reduce((prev, cur, i) => (i % chunkSize) ? prev : prev.concat([arr.slice(i, i + chunkSize)]), []);
  }
}

然后按以下方式使用它：

<tr *ngFor="let chunk of numbersArray | chunks: 7">
  <td *ngFor="let number of chunk">{{number}}</td>
</tr>

<强> Plunker Example

Answer 3

将数组减少为项目行：

  numbersArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];
  rowsArray = [];

  ...

   this.rowsArray =
      this.numbersArray.reduce((memo, item) => {
        let itemsPerRow = 7;
        if (!memo.length) { return memo = [...memo, [item]]; }

        let lastItem = memo[memo.length-1];

        if (lastItem.length < itemsPerRow) {
          memo[memo.length-1] = [...lastItem, item];
        } else {
          memo = [...memo, [item]];
        }

        return memo;
      }, []);

HTML：

<table>
  <tr *ngFor="let row of rowsArray">
    <td *ngFor="let item of row">
      {{ item }}
    </td>
  </tr>
</table>

Answer 4

我找到的解决方案没有自定义Pipe或更改了numbersArray

<table>
  <tr *ngFor="let row of [1, 2, 3, 4, 5]"> 
    <td *ngFor="let col of [1, 2, 3, 4, 5, 6, 7]">
    <div>{{numbersArray[(row -1) * 7 + col - 1]}}</div>
    </td> 
  </tr>
</table>

https://plnkr.co/edit/VUw3j27EGVzZv8NZykWr?p=preview

如何创建一个角度为数组的表行？

4 个答案: