eine Tabellenzelle einlegen progamatically in Angular 2

Question

Ich habe diese Tabelle in der Komponente HTML-Datei:

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

Gerade jetzt, die Zelle

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

wird immer angezeigt, und ich will verstecken/zeigen Sie es mit bestimmten Kriterien wie:

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

so dass der Code i verwenden möchten ist:

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

aber das ist, wie es gemacht ist:

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

Wie ich die eine leere Zelle im Fall hinzufügen * ngIf true zurück, wie in Bild So kann der Tisch korrekt ausgerichtet/angezeigt werden?

hier ist der Repo mit den Dateien: https://github.com/predatorkill/ng2-forms-demo/tree/master/src/app/client/userForms/formsTable

Answer 1

benötigen Sie den Inhalt einer Zelle zu verstecken, anstatt die ganze Zelle zu verstecken. Verwenden Sie innere span zum Beispiel:

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

Mit diesem Ansatz ist td immer sichtbar (so dass Sie nicht gebrochen Tabelle sehen), aber mit leeren Inhalt, wenn nötig.

..und bitte setzen Sie den *ngFor Zyklus auf das <tr> Element statt <tbody>. Wie:

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

(In Angular die *ngFor Iterierten auf den zugewiesenen Element, und Sie wollen nur einzelne tbody)