Question

我正在使用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);
}

我想将其打印为HTML格式的10 x 10表格。它在我使用<table>和<td>时有效，但如果我想使用<div>，则无效。它只打印100个盒子，但不打印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>

Answer 1

这是因为div元素是 "block-level" element ，并且块级元素在新行上呈现并且是其父元素的宽度的100％

如果您想使用div元素，但具有table样式输出，则需要确保代表您的行的div元素的样式为{ {1}}并且代表您的单元格的table-row元素的样式为div，并且包含所有元素的table-cell样式为：div。

以下是一个例子：

＆＃13;

table

＆＃13;

.table { display:table; }
.row   { display:table-row; }
.cell  { display:table-cell; border:1px solid black; padding:3px; }

＆＃13;

将2D数组打印到HTML表

1 个答案: