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像图片一样返回true，我如何添加一个空单元格，以便正确对齐/显示表格？

这是包含文件的回购： 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">
...

（在Angular中，*ngFor会对指定的元素进行迭代，而您只需要单个tbody）

以编程方式在Angular 2

1 个答案: