私はコンポーネントのhtmlファイルにこのテーブルを持って角度2

Question

にprogamatically表のセルを挿入します。今

<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" 

のような特定の基準で非表示/表示します。 210

ので、私が使用したいコードは次のとおりです。

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

が、それは、それがレンダリングされます方法は次のとおりです。

* ngIfは絵のように真を返す場合には、私は空のセルを追加することができますどのように

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

テーブルを正しく整列/表示できますか？

は、ここでは、ファイルとのレポです： 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は常に（あなたが壊れたテーブルが表示されていない）見えますが、空の内容です。

。<tbody>ではなく、<tr>要素に*ngForサイクルを入れてください。同様に：

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