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

107

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

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

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

html templates angular

— 贾尼斯普里茨考
source

Answers:

169

ng-container优于template：

<ng-container *ngIf="expression">

看到：

Angular 2 ng容器

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

— 亚历山大·泰勒
source

您应该添加一个示例“生成” HTML代码段，以明确未创建HTML <ng-container>元素。

— 谢尔盖

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

您可以简单地使用<template>标记，并替换*ngIf成[ngIf]这样。

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

— 贾尼斯普里茨考
source

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

— Pardeep Jain

在*ngIf模板中有一个元素时，如果您template自己编写，则不需要。在某些情况下，多余的元素可能会干扰。

— 柚木

我们可以将template标签放在tr/ td标签内吗？

— Pankaj Parkar'8

是的，这是一种特殊的元素。根据定义，不允许使用w3.org/TR/html401/struct/tables.html#h-11.2.3，但它可以工作并呈现。如果Iam使用* ng如果它不能正常工作。但是使用[ngIf]可以。请问您能告诉我为什么吗？

— sascha10000

@ sascha10000因为具有*ngIf="foo"等于包装<template [ngIf]="foo">标签。简而言之，template+ []== *，所以[]！= *。除了以外的*任何元素都是有道理的。 template

— 富兰克林于

您不能div直接放在内tr，那样会使HTML无效。tr只能td/ th/ table元素在它里面与他们你可以有其他HTML元素。

你可能会略有不同的HTML有*ngFor过tbody与有ngIf过tr低于自己喜欢。

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

— Pankaj Parkar
source

基本上可以解决问题，但是您需要权衡使用tbody获得的核心能力。如果您有一张大桌子，您可以固定头部，只需滚动琴键即可。您的肢体将扮演tr的角色，tr将扮演一个附加包装的角色。如果不需要在顶部滚动和固定头部，这是一个务实的解决方案。我对我所说的内容的引用是：w3.org/TR/html401/struct/tables.html#h-11.2.3

— sascha10000