在 Angular 2 中使用没有额外元素的 ngIf

Posted 2023-03-05

【中文标题】在 Angular 2 中使用没有额外元素的 ngIf

【英文标题】：Using ngIf without an extra element in Angular 2

【发布时间】：2016-07-22 10:06:53

【问题描述】：

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

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

它在表格中不起作用，因为这会使 html 无效。

【参考方案1】：

ng-container 优于 template：

<ng-container *ngIf="expression">

见：

Angular 2 ng-container

https://github.com/angular/angular.io/issues/2303

【讨论】：

您应该添加一个示例“生成”HTML sn-p，以明确没有创建 HTML 元素。

我每天来这里两次。我不能把它留在我的脑海里。

ng-container 在我们的例子中似乎生成了一个div？

【参考方案2】：

我找到了一种方法：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template。

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

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

【讨论】：

很好，但是 *ngIf itslef 创建了一个 template 标签，默认情况下，带有 * 前缀的角指令会创建一个模板标签。所以两者都是相同的[ngIf] and *ngIf

使用*ngIf，您在模板中有一个元素，如果您自己编写template，则没有。在某些情况下，额外的元素可能会干扰。

我们可以在里面放template标签，tr/td标签吗？

是的，它是一种特殊的元素。根据定义，w3.org/TR/html401/struct/tables.html#h-11.2.3 是不允许的，但它可以工作和渲染。如果我正在使用 *ngIf 它不工作顺便说一句。但是使用 [ngIf] 可以。请问能不能告诉我这是为什么？

@sascha10000 因为拥有*ngIf="foo" 等同于包装<template [ngIf]="foo"> 标签。简而言之，template + [] == *，所以 [] != *。 * 在任何元素中都有意义 除了 template.

【参考方案3】：

您不能将div 直接放在tr 中，这会使HTML 无效。 tr 中只能有 td/th/table 元素，在其中你可以有其他 HTML 元素。

您可以稍微更改您的 HTML 以使 *ngFor 超过 tbody 并让 ngIf 超过 tr 本身，如下所示。

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

【讨论】：

它基本上可以解决问题，但您会权衡使用 tbody 获得的核心能力。如果你有一张大桌子，你可以修复头部，只需滚动 tbody。您的 tbody 将具有 tr 的角色，而 tr 将具有附加包装器的角色。如果不需要滚动并将头部固定在顶部，这是一个实用的解决方案。我所说的参考：w3.org/TR/html401/struct/tables.html#h-11.2.3

【参考方案4】：

添加括号可解决此问题

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

【参考方案5】：

你可以试试这个：

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

在这里，我在 ng 容器中进行了迭代循环，因此它不会创建额外的 dom，并且稍后在 tr 标记检查条件中是否要渲染。