配列に応じて角度2の場所のコンポーネント

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

を持っています私がしようと試みたHTML内courtInfo

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

（私はこの配列に各ラウンドをリフレッシュしたい、後でラウンド原因を命名）

• を作成.TSで10

  • クラス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 
    

  （私はこれを持って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自体シェルはdiv要素のウィッヒシェルも（それ以降）円を描くかどうか。

  しかし、これは機能しません。セルはコートに追加されません。 私はいくつかのヒント

Answer 1

のためにあなたは、セル情報のdoesnを構築する方法を模索

イム...クラスのインターンである[セル]私はどこかにバインドしなければならなかった場合、私は配列を起こさないことを推測知りませんあまり意味をなさない。行とその値の両方がタイプ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" 

行トラフ行くためにまず、 2番目は細胞を取得します。