Question

我是角度2的新手，我被卡住了...... 我尝试为棋盘游戏创建一个棋盘（逆转，棋盘像国际象棋，但单色）我有一个类cellInfo（这里我想保留信息）

constructor(row: number, col: number, stats: boolean[]){
  this.row = row;
  this.col = col;
  this.stats = stats;
}

我有一个类courtInfo（这里我创建了一个cellinfo数组）

constructor(x: number){
  this.x = x;
  this.cells = new CellInfo[x];

  for(let row: number = 0; row < x; row++){
    this.cells[row] = new CellInfo[x];
    for(let col: number = 0; col < x; col++){
      this.cells[row][col] = new CellInfo(row, col, [false, false, false])
    }
  }
}

我有一个组件courtComonent

在.ts我创建了一个courtInfo

constructor() {this.round = new CourtInfo(8); }

（我之后命名为圆形原因我想每轮刷新这个数组）

在html中我试图从类cellComponent

创建一个组件对象

 div *ngFor="let cellrow of round.cells"

   div class = row; *ngFor="let cellcol of round.cells[cellrow]"

     div class = col

       cell></cell

     /div 

   /div

 /div

（请想象＆lt;和＆gt;

在court.component.css我有这个：

.row{
  --row-hight: 12,5%;
  display: table;
  width: 100%;
  height: var(--row-hight);
}
.col{
  display: flex;
  width: auto;
  height: 100%;
}
cell{
  display: flex;
  width: 100%;
  height: 100%;
}

CellComponent本身的shell是一个div（后来）是否绘制一个圆圈。

但是这不起作用，细胞不会加入法庭。我不知道我是否必须在某处绑定，我猜不会导致数组[cells]是一个实习生......

我正在寻找一些提示

Answer 1

构建单元格信息的方式并没有多大意义。您正在使两行和它们的值都具有 CellInfo 的类型，在任何地方都没有数组。

应该更像这样：

constructor(x: number){
  this.x = x;
  this.cells = []; // the type of cells should be CellInfo[][]

  for(let row: number = 0; row < x; row++){
    this.cells[row] = []; // a row is just an array of CellInfo
    for(let col: number = 0; col < x; col++){
      // values are stored in the row array at the column position
      this.cells[row][col] = new CellInfo(row, col, [false, false, false]) 
    }
  }
}

在那之后你应该能够像这样经历他们：

 div *ngFor="let cellrow of round.cells"

   div class = row; *ngFor="let cellcol of cellrow"

首先是通过行，第二个是获取单元格。

Angular 2 place组件取决于数组

1 个答案: