如何创建包含元素的动态 HTML 表格行

问题描述 投票:0回答:1

在我的角度应用程序中,我有一个数字数组,如下所示。 我想遍历这个数组并在每个 TR 中显示这些值 20 ,这样数字就不会被截断并在 HTML 表的每一行中以逗号结尾。 我们怎样才能做到这一点。

让arr = [20001,20002,20003,20004,20005,20006,20007,20008,20009,200010,200011,200012,20011,20012,20013,20014,20015,20016,20018,20018,20017,20016,20018,20015 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]

html angular
1个回答
0
投票

您需要创建一个数组数组,每个子数组包含 20 个数字

let tableArr = [];
for (let i = 0; i < arr.length; i += 20) {
  tableArr.push(arr.slice(i, i + 20));
}

在 html 中:

<table>
  <tr *ngFor="let row of tableArr">
    <ng-container *ngFor="let num of row">
      <td>{{ num }}</td>
    </ng-container>
  </tr>
</table>
© www.soinside.com 2019 - 2024. All rights reserved.