Javascript 将2D数组打印到HTML表

我正在用TypeScript构建一个2D数组。这是我的TypeScript代码

this.boxArray = new Array<Array<Box>>();
const ROW_MAX: number = 10;
const COL_MAX: number = 10;

for (let i: number = 0; i < ROW_MAX; i++) {
  const row: Box[] = new Array<Box>();
  for (let j: number = 0; j < COL_MAX; j++) {
    row.push(new Box("A"));
  }
  this.boxArray.push(row);
}

this.boxArray=new Array（）；
const ROW_MAX:number=10；
const COL_MAX:编号=10；
for（设i:number=0；i

我想用HTML把它打印成10乘10的表格。当我使用

和

时，它可以工作，但如果我想使用

，它就不工作了。它只打印100个方框，而不是10乘10

<div class="CrosswordGridComponent" *ngFor="let row of boxArray; let i = index">
<div *ngFor="let col of boxArray; let j = index">
  <input id="{{i}}_{{j}}" type="text" maxLength="1" class="box"  
  [ngClass]="{ 
    'black': boxArray[i][j].isBlack()
  }" >
</div>

---

这是因为

div

元素是，块级元素渲染在新行上，并且是其父元素宽度的100%

如果要使用

div

元素，但具有

表格

样式输出，您需要确保表示行的

div

元素的样式为

table row

，表示单元格的

div

元素的样式为

table cell

，保存所有行的

div

元素的样式为：

table

下面是一个例子：

.table{display:table；}
.row{显示：表行；}
.cell{显示：表格单元格；边框：1px纯黑色；填充：3px；}

第1单元，第1行
第2单元，第1行
第3单元，第1行
第1单元，第2行
第2单元，第2行
第3单元，第2行
第1单元，第3行
第2单元，第3行
第3单元，第3行

非常感谢！它起作用了。但是使用表的问题是我不能将maxLength固定为1。我正在用Angular 4 btw做一个纵横字谜生成器。谢谢你的支持time@Mohamed-AliElakhrass但是，您将

输入

元素放在每个单元格中，对吗？那么，问题是什么？另外，别忘了标记为“答案”。