Question

我需要在angular 2 / typescript

中动态创建对象表

创建对象数组

export class AppComponent {
  gameBoard= GAMEBOARD;
}

var size=10;//will be for user enter
var GAMEBOARD=[];
var x=0;
for(var i=0;i<size;i++){
for (var j=0; j < size; j++) {
  if (!GAMEBOARD[i]) {                 
      GAMEBOARD[i] = [];              
  }
  GAMEBOARD[i][j]=new GameField(x);
  x++;
}}

在模板中使用：

<tr *ngFor="let x of gameBoard">
  <game-field *ngFor="let field of gameBoard[x]" [field]="field" ></game-field>
</tr>

尝试输入：

@Component({
  selector: 'game-field',
//  inputs:['field'],
template: '<td >{{field.id}}</td>',
  styleUrls: ['./app.component.css']
})
export class GameFieldComponent{
@Input() field: GameField;
}

如何将GAMEBOARD中的所有对象放入表中？

（我是网络开发和Stackoverflow的新手，所以请放纵）

Answer 1

当您将custom-element置于tr标记内时，它将变为无效的html，并且会从表格标记中抛出。您只能在td th，tr等（仅tr中的表格元素）所有其他元素/自定义元素>

相反，您应该重复td并从game-field组件生成内容。它可能看起来像下面。

同样纠正内部ngFor指向x而不是gameBoard[x]

的循环

<tr *ngFor="let x of gameBoard">
  <td *ngFor="let field of x"> 
     <game-field [field]="field"></game-field>
  </td>
</tr>

游戏领域组件模板

template: '{{field.id}}',

Answer 2

问题是您在顶部导出，然后重新定义GAMEBOARD。你应该移动

var GAMEBOARD = [];

到顶部。

另外，使用const和let代替var可以帮助你避免这些问题。

在Angular 2

2 个答案: