表のコンテンツセレクタを入力

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

コンポーネントのCSSに

game-field { display: block; } 

を追加