插入一個表格單元格progamatically在角2

Question

我有這個表中組件的HTML文件：

<table class="table table-hover table-responsive table-condensed"> 
<thead> 
<tr> 
    <th>Image</th> 
    <th>Form ID</th> 
    <th>Text Input One</th> 
    <th>Text Input Two</th> 
    <th>Owner</th> 
    <th>Date Submitted</th> 
    <th>Date Edited</th> 
    <th>Edit</th> 
    <th>Delete</th> 
</tr> 
</thead> 
<tbody *ngFor="let form of fetchedForms"> 
<tr> 
    <td class="img-resized"><img class="img-thumbnail img-responsive" src="./uploadsFolder/{{form.owner}}/{{form.imagePath}}"></td> 
    <td>{{form._id}}</td> 
    <td>{{form.textInputOne}}</td> 
    <td>{{form.textInputTwo}}</td> 
    <td>{{form.owner}}</td> 
    <td>{{form.dateSubmitted | date: 'medium'}}</td> 
    <td>{{form.updatedAt | date: 'medium'}}</td> 
    <td> 
    <button class="btn-default" [routerLink]="['edit', form._id]"><i class="fa fa-pencil"></i></button> 
    </td> 
    <td> 
    <button class="btn-danger" (click)="onDelete(form._id)"><i class="fa fa-trash"></i></button> 
    </td> 
</tr> 
</tbody> 

眼下，細胞

<td>{{form.updatedAt | date: 'medium'}}</td> 

始終顯示，我想隱藏/顯示某些標準，如：

*ngIf="form.dateSubmitted != form.updatedAt" 

，所以我想使用的代碼是：

<td *ngIf="form.dateSubmitted != form.updatedAt">{{form.updatedAt | date: 'medium'}}</td> 

，但是這就是它的呈現方式：

form http://image.prntscr.com/image/4868d0f1916442bd80814586b4f4f5a0.png

如何，我可以的情況下，添加一個空單元格* ngIf返回類似的圖片真所以桌子可以正確對齊/顯示？

這裏是一個與文件回購： https://github.com/predatorkill/ng2-forms-demo/tree/master/src/app/client/userForms/formsTable

Answer 1

你需要隱藏，而不是隱藏整個單元的單元格的內容。例如使用內span：

<td> 
    <span *ngIf="form.dateSubmitted != form.updatedAt">{{form.updatedAt | date: 'medium'}}</span> 
</td> 

採用這種方法，td始終可見（這樣你就不會看到破錶），但空的內容，如果需要的。

..請將*ngFor循環放在<tr>元素上，而不是<tbody>。像：

<tbody> 
    <tr *ngFor="let form of fetchedForms"> 
... 

（在折角，已分配的元素在*ngFor迭代，並希望只是單一tbody）