在Angular 2中以编程方式插入表格单元格
Stathis Ntonas
我在组件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>
但这就是它的呈现方式：
如果* ngIf返回true（如图所示），以便表格可以正确对齐/显示，我如何添加一个空单元格？
这是文件的仓库：https : //github.com/predatorkill/ng2-forms-demo/tree/master/src/app/client/userForms/formsTable
彼得·亚当
您需要隐藏单元格的内容，而不是隐藏整个单元格。span例如，使用inner ：
<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）
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Angular 2-高亮显示更新的表格单元格
- 2
Angular 2-高亮显示更新的表格单元格
- 3
如何在Angular 2中逐个单元格地构建表格行
- 4
在Swift中以编程方式选择表格单元格
- 5
以编程方式添加的 UITableView 中的单元格插入错误
- 6
ag-grid ：在按键时禁用单元格编辑并使用编辑按钮以编程方式启用行编辑（Angular 2）
- 7
Angular 1.5 在表格单元格中显示数组的多个元素
- 8
使用angular js垂直填充表格中的单元格值
- 9
Angular JS：制作表格单元格密码类型
- 10
Angular 2：以编程方式在表格的所有行中的组合框中选择选项
- 11
如何以编程方式在表格视图的静态单元格中添加图像
- 12
通过循环在表格单元格+ iOS中以编程方式添加图像
- 13
以编程方式插入不同的Angular2组件
- 14
在Angular JS中以编程方式插入数组值
- 15
Angular UI Grid不更新单元格中的指令
- 16
Angular mat-table - 单元格中的 HTML 元素
- 17
使用Angular JS更改HTML表格单元格背景颜色
- 18
如何获取以编程方式在放置在iOS中的表格视图的单元格和单元格索引路径中的滚动视图中创建的视图的位置
- 19
以编程方式选择 JTable 中的多个单元格
- 20
在表格单元格中插入下拉列表选项
- 21
如何在表格单元格中插入弹出窗口？
- 22
在Angular 2中以编程方式加载和卸载模块
- 23
在angular2中以编程方式设置HTML滑块背景
- 24
在Angular 2中以编程方式加载和卸载模块
- 25
以编程方式区分 Angular 2 组件中的路由
- 26
ListView以编程方式创建单元格
- 27
您可以通过编程方式在Google表格单元格中生成按钮吗？
- 28
以编程方式测试Google表格单元格是否在命名范围内
- 29
自定义表格视图单元格中的图像视图在单元格插入表格后消失
我来说两句