无法让数据跨越正确的列数
Posted
技术标签:
【中文标题】无法让数据跨越正确的列数【英文标题】：Cannot get data to span correct number of columns 【发布时间】：2019-12-24 20:20:27 【问题描述】：我正在用 html 创建一个表格。我想使用colspan 跨越所有列。我正在使用几个不同的 ngIf 语句创建此表。
我按照其他帖子中的建议添加了width，但它也不起作用。
我的 html 看起来像：
<!DOCTYPE html>
<br>
<div *ngIf="finalData.length>0">
<p>User:<strong> ourUser</strong> </p>
<div *ngIf="Error1; else Error1">
<p> It appears that this user cannot be found on Platform 1, so we cannot display any user information.</p>
</div>
<ng-template #noError1>
<div>
<div>
<table>
<thead>
<tr>
<th scope="col"> Platform 1</th>
<th>Name</th>
<th>ID1</th>
<th>Email</th>
<th>ID2</th>
<th>Status</th>
</tr>
</thead>
<tr>
<th <th>Platform 1</th>
<td>finalData[0].name</td>
<td>finalData[0].id1</td>
<td>finalData[0].userEmail</td>
<td>finalData[0].userID</td>
<td>N/A</td>
</tr>
<div *ngIf="Error2; else noError2">
<tr>
<th <th>Platform 2</th>
<tdcolspan="5" > It appears that this user cannot be found</td>
</tr>
</div>
<ng-template #noError2>
<tr>
<th <th>Platform 2</th>
<td>finalData[1].name</td>
<td>finalData[1].id1</td>
<td>finalData[1].userEmail</td>
<td>Not Listed</td>
<td>status</td>
</tr>
</ng-template>
<div *ngIf="Error3; else noError3">
<tr>
<th>Platform 3</th>
<td colspan="5"> It appears that this user cannot be found on Platform 3</td>
</tr>
</div>
<ng-template #noError3>
<tr>
<th>Platform 3</th>
<td>finalData[2].name</td>
<td>finalData[2].id1</td>
<td>finalData[2].userEmail</td>
<td>finalData[2].userID</td>
<td>N/A</td>
</tr>
</ng-template>
</table>
</div>
</div>
<br>
<div *ngIf="Error4; else noError4">
<p></p>
</div>
<ng-template #noError4>
<div>
<div>
<table>
<thead>
<tr>
<th <th>Platfrom </th>
<th <th>Number of Active IDs</th>
<th <th>User ID</th>
</tr>
</thead>
<tr>
<th <th>plat</th>
<td> plat</td>
<td> platID</td>
</tr>
<tr>
<th <th>cat</th>
<td> cat</td>
<td> catID</td>
</tr>
</table>
</div>
</div>
</ng-template>
</ng-template>
<br>
<button (click)='onBack()' id='back'>
<span>Back to Results</span>
</button>
</div>
我想要一些看起来像的东西
| | | | | | |
|User Info. | It appears that this user cannot be found. |
| | | | | | |
相反，我得到了
| | | | | | |
|User Info. |It appears | |
|that this | |
|user cannot | |
|be found. | |
| | | | | | |
否则，表格将按预期工作。
Stackblitz example
有什么想法吗？
【问题讨论】：
第一列不应该是2的colspan吗？或者您可以插入一个空列。
为什么是 2 而不是 1？这并没有改变结果。
那么该行是否也在表中？
是的，它在一个表中。我执行 ngIf 来检查我是否有属于 5 个单元格的数据。如果我这样做了，我可以填写它们。如果没有，那么我想打印“似乎找不到该用户。”除了在所有五个单元格而不是一个单元格上打印消息之外，一切都按预期工作。
您可以添加一个空的 这里不是div：
<div *ngIf="Error3; else noError3">
使用<ng-container>，它不会包含在 DOM 中，对表结构几乎没有危害：
<ng-container *ngIf="Error3; else noError3">
【讨论】：
【参考方案2】：发现问题。这实际上非常容易。您不能将表格行包装在 div 中。
<tr *ngIf="Error2; else noError2">
<th>Platform 2</th>
<td colspan="5"> It appears that this user cannot be found on Platform 2.</td>
</tr>
【讨论】：
以上是关于无法让数据跨越正确的列数的主要内容，如果未能解决你的问题，请参考以下文章