无法让数据跨越正确的列数

Question

我正在 HTML 中创建一个 table。我想使用 colspan 跨越所有列。我正在使用几个不同的 ngIf 语句创建此 table。

我按照其他帖子中的建议加入了 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" width="100"> 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.   |                                                  |                      
|           |            |            |            |            |           |

否则 table 会按预期工作。

Stackblitz example

有什么想法吗？

Answer 1

找到问题了。这实际上非常容易。您不能将 table 行包装在 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>

Answer 2

而不是这里的 div：

<div *ngIf="Error3; else noError3">

使用 <ng-container>，它将不包含在 DOM 中，并且对 table 结构几乎无害：

<ng-container *ngIf="Error3; else noError3">

无法让数据跨越正确的列数

Cannot get data to span correct number of columns

html

html-table

col

angular