填写表格中的内容选择器

Question

如何在Angular2中填充我的选择器内容？ 模板：

<table id="gboard"  >
  <tr *ngFor="let x of gameBoard">
    <td *ngFor="let field of x">
       <game-field [field]="field" (click)="handleClick(field)" [class.cross]="field.player==0"></game-field>
    </td>
  </tr>
  <table>

组件def：

@Component({
  selector: 'game-field',
template: ' test',
  styleUrls: ['./app.component.css']
})

和css：

table, th, td, game-field { 
  border: 1px solid black;
   height: 50px;
}
td,game-field{
  width: 50px;
}
.cross{
  width: 45px;
height: 45px;
background: linear-gradient(to bottom, transparent 35%, #d00 35%, #d00 65%,  transparent 65%),
  linear-gradient(to right, transparent 35%, #d00 35%, #d00 65%, transparent 65%);
}
.circle{
  border-radius: 50%;
    width: 45px;
    height: 45px;
}

因为你可以看到类选择器只填充文本区域 - 为什么，以及如何修复它？

Answer 1

添加

game-field { display: block; }

到组件CSS