將2D數組打印到HTML表

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> ，它可以工作，但是，如果我想使用<div> ，則不起作用。 它只打印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>

Answer 1

這是因為div元素是“塊級”元素，並且塊級元素在新行上呈現，並且是其父元素寬度的100％。

如果要使用div元素，但具有table樣式輸出，則需要確保將代表行的div元素樣式化為table-row並確保將代表單元格的div元素樣式化為table-cell包含所有內容的div樣式為： table 。

這是一個例子：

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

 <div class="table"> <div class="row"> <div class="cell">Cell 1, Row 1</div> <div class="cell">Cell 2, Row 1</div> <div class="cell">Cell 3, Row 1</div> </div> <div class="row"> <div class="cell">Cell 1, Row 2</div> <div class="cell">Cell 2, Row 2</div> <div class="cell">Cell 3, Row 2</div> </div> <div class="row"> <div class="cell">Cell 1, Row 3</div> <div class="cell">Cell 2, Row 3</div> <div class="cell">Cell 3, Row 3</div> </div> </div>