如何在Angular中实现每行显示20个元素的动态HTML表格行

步骤1：组件内将原数组分组为每20个元素一组 #

在Angular组件类中，把一维数组转换成二维数组，每个子数组包含20个元素（最后一组若不足20个仍按规则处理），用计算属性实现即可：

import { Component } from '@angular/core';

@Component({
  selector: 'app-number-table',
  templateUrl: './number-table.component.html',
  styleUrls: ['./number-table.component.css']
})
export class NumberTableComponent {
  arr = [20001,20002,20003,20004,20005,20006,20007,20008,20009,200010,200011,200012,20011,20012,20013,20014,20015,20016,20017,20018,20019,
    200110,200111,200112,20021,20022,20023,20024,20025,20026,20027,20028,20029,200210,200211,200212,20031,20032,20033,20034,20035,
    20036,20037,20038,20039,200310,200311,200312,20041,20042,20043,20044,20045,20046,20047,20048,20049,200410,200411,200412,20051,
    20052,20053,20054,20055,20056,20057,20058,20059,200510,200511,200512,20061,20062,20063,20064,20065,20066,20067,20068,20069];

  // 按每20个元素分组的计算属性
  get groupedArr() {
    const groups = [];
    for (let i = 0; i < this.arr.length; i += 20) {
      groups.push(this.arr.slice(i, i + 20));
    }
    return groups;
  }
}

步骤2：模板中渲染表格 #

在组件HTML模板里，通过嵌套*ngFor遍历分组后的数组，生成表格行和单元格，每个元素后添加逗号（包括每行末尾）：

<table>
  <tr *ngFor="let group of groupedArr">
    <td *ngFor="let num of group">
      {{ num }},
    </td>
  </tr>
</table>

步骤3：确保数字不被截断 #

为避免数字因单元格宽度不足被截断，在组件CSS文件中添加样式：

table {
  border-collapse: collapse;
}

td {
  white-space: nowrap; /* 禁止换行，保证数字完整显示 */
  padding: 4px 8px;
}

这样处理后，数组会被分成每20个元素一行，所有数字完整显示，且每个元素（含每行最后一个）后都带有逗号。

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