在角度2中使用不带额外元素的 ngIf

我可以在没有额外容器元素的情况下使用 ngIf吗？

<tr *ngFor="...">
<div *ngIf="...">
...
</div>
<div *ngIf="!...">
...
</div>
</tr>

它不能在表中工作，因为这会导致 HTML 无效。

63214 次浏览

小开

您不能将 div直接放在 tr中，这样会使 HTML 无效。tr只能包含 td/th/table元素，在它们内部可以包含其他 HTML 元素。

你可以稍微改变你的 HTML 有 *ngFor超过 tbody和有 ngIf超过 tr本身如下。

<tbody *ngFor="...">
<tr *ngIf="...">
...
</tr>
<tr  *ngIf="!...">
...
</tr>
..
</tbody>

小开

您可以像下面这样简单地使用 <template>标记并将 *ngIf替换为 [ngIf]。

<template [ngIf]="...">
...
</template>

小开

最佳答案

ng-container优于 template:

<ng-container *ngIf="expression">

参见:

小开

添加括号可以解决这个问题

 <ng-container *ngIf="(!variable| async)"></ng-container>

小开

你可以试试这个:

<ng-container *ngFor="let item of items;">
<tr *ngIf="item.active">
<td>\{\{item.name}}</td>
</tr>
</ng-container>

在这里，我在 ng 容器中使用了迭代循环，因此如果我想呈现或不呈现，它不会创建额外的 dom，稍后在 tr 标记检查条件下也不会创建。