使用 *ngFor 生成两个表行

Question

我正在开发一个应用程序来显示使用 Java 的 TestNG 测试网站的结果。我知道这有点多余，因为 TestNG 已经生成了自己的站点，但它是训练营训练练习的一部分。

我在使用*ngFor 生成表格时遇到了一个特殊问题。问题是，如果测试返回失败，它会返回堆栈跟踪。因为 Java 堆栈跟踪非常冗长，所以堆栈跟踪被放置在新行上，因此我不能像往常那样将 *ngFor 放在 <tr> 标记上。我犹豫是否将其放在<tbody> 标签上，因为我担心这会导致布局问题（确实如此），所以我尝试将两个<tr> 标签包装在<div> 中，然后将*ngFor 放在上面。那没有用，因为现在我的表格标题没有与表格的内容对齐。我最终将*ngFor 指令放在<tbody> 上，因为这似乎大部分 没问题，即使它在我的行之间产生了一些伪影，就好像它们有边界一样。

但是我仍然不喜欢这种方法。它不仅是 hacky，而且会在非常大的布局上产生一些错误。

<table class="table table-striped table-dark table-hover table-sm table-responsive" *ngIf="loaded">
<thead>
    <tr>
        <th>Name</th>
        <th>Signature</th>
        <th>Duration</th>
        <th>Started At</th>
        <th>Finished At</th>
        <th>Status</th>
    </tr>
</thead>
<tbody *ngFor="let method of testResults.tests; let index = index">
        <tr>
            <td>{{ method.name | camelToTitle }}</td>
            <td>{{ method.signature }}</td>
            <td>{{ method.duration_ms }} ms</td>
            <td>{{ method.startTime | dates }}</td>
            <td>{{ method.finishTime | dates }}</td>
            <td
                [ngStyle]="{ background: selectColor(method.status) }">
                {{ method.status |passfail }}
            </td>
        </tr>
        <tr>
            <td *ngIf="method.exceptionClass != null" class="table-danger">{{ method.exceptionClass }}</td>
            <td *ngIf="method.exceptionClass != null" colspan="5" class="table-danger">
                <button class="btn btn-dark" (click)="toggleStackTrace(index)">{{ btnText }} Stack Trace</button>
                <span class="font-weight-bold ml-1">Exception Message: {{ method.exceptionMessage }}</span>
                <div *ngIf="method.showStackTrace">
                    <p [appStacktrace]="method.stackTrace"></p>
                </div>
            </td>
        </tr>
</tbody>
</table>

基本上我要做的是为每个运行的测试生成一行，如果测试有一个堆栈跟踪，那么也有一行。有没有一种好的、干净的方法来做这件事？

Answer 1

最好的方法是使用ng-container。

Angular 文档将 ng-container 描述为

一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放入 DOM 中。

read more here

这允许您将 HTML 包装在 ng-container 标记中，如下所示：

<table class="table table-striped table-dark table-hover table-sm table-responsive" *ngIf="loaded">
<thead>
    <tr>
        <th>Name</th>
        <th>Signature</th>
        <th>Duration</th>
        <th>Started At</th>
        <th>Finished At</th>
        <th>Status</th>
    </tr>
</thead>
<tbody>
    <ng-container *ngFor="let method of testResults.tests; let index = index">
        <tr>
            <td>{{ method.name | camelToTitle }}</td>
            <td>{{ method.signature }}</td>
            <td>{{ method.duration_ms }} ms</td>
            <td>{{ method.startTime | dates }}</td>
            <td>{{ method.finishTime | dates }}</td>
            <td
                [ngStyle]="{ background: selectColor(method.status) }">
                {{ method.status |passfail }}
            </td>
        </tr>
        <tr>
            <td *ngIf="method.exceptionClass != null" class="table-danger">{{ method.exceptionClass }}</td>
            <td *ngIf="method.exceptionClass != null" colspan="5" class="table-danger">
                <button class="btn btn-dark" (click)="toggleStackTrace(index)">{{ btnText }} Stack Trace</button>
                <span class="font-weight-bold ml-1">Exception Message: {{ method.exceptionMessage }}</span>
                <div *ngIf="method.showStackTrace">
                    <p [appStacktrace]="method.stackTrace"></p>
                </div>
            </td>
        </tr>
    </ng-container>
</tbody>
</table>

*ngFor 的行为保持不变，但 DOM 只会包含预期的标签（tbody、tr、td 等）