Question

我们不能在同一元素上使用*ngFor和*ngIf。一种技术是嵌套它们。几乎所有地方都可以，除了在表中要同时遍历tr和有条件地打印它们的情况之外。

作为suggested here，我们应该使用<template>或<ng-template>元素，以免将其打印到DOM。

但是我无法使其工作。它根本不打印任何内容。 Here's a plunker to show it in action。

我该怎么办？

Answer 1

由于* ngIf呈现为[ngIf]，请尝试直接在应使用的模板上使用[ngIf]。

当我们在指令前加*时，就是在告诉它使用元素作为模板附加到该元素。基本上* ngIf是的组合 ng-template + [ng-If]。

HTML：

<tr *ngFor="let item of items">
   <ng-template [ngIf]="item.month == 12">
        <td>{{ item.year }}</td>
        <td>{{ item.month }}</td>
   </ng-template>
</tr>

或者简单地，您可以用* ngIf

装饰

<tr *ngFor="let item of items">
   <div ngIf*="item.month == 12">
        <td>{{ item.year }}</td>
        <td>{{ item.month }}</td>
   </div>
</tr>

更新了 plunker

关于结构化指令的有用的 article

Answer 2

所以还有一个叫ng-container的东西

ng-container和ng-template两者都处于当前状态（2.x，4.x）用于将元素分组在一起而不必引入另一个将在页面上呈现的元素（例如div或span）。

ng-template和ng-container之间的区别是

ng-template用于ng-if，ng-for和ng-switch之类的结构指令。如果不使用结构性指令就使用它，则什么也不会发生并呈现。

ng-container用于没有合适的包装器或父容器的情况。在大多数情况下，我们将div或span用作容器，但在这种情况下，当您想使用多个结构指令，但不能在一个元素上使用多个结构指令时，在这种情况下，ng-container可以是用作容器

就您而言

<ng-template>用于声明模板。您要在此处隐藏/显示一些节点

所以您需要使用ng-container来实现

<tr *ngFor="let item of items">
    <ng-container *ngIf="item.month == 12">
        <td>{{ item.year }}</td>
        <td>{{ item.month }}</td>
    </ng-container>
</tr>

有几个链接可以帮助您理解两者

相关的link

structural directives

discussion在ng-template和ng-container上

Answer 3

我希望您现在可能已经找到答案了。这是针对尚未迷失答案的人的。解释ng-template的更好方法是使用与结构指令（* ngIf，* ngSwitch）一起使用的模板元素，该结构指令被编译以在其中生成结构。结合使用以上结构指令和ng-template的问题是，当* ngIf为true时，将生成一个模板。但是我们无处指定应渲染此模板。另一种方法是使用* ngIf作为[ngIf]属性绑定值，其中属性绑定应为布尔值。

现在angular将其解释为应根据布尔值true生成并渲染模板。下面提供了一个非常基本的示例。

（我无法使用pluker链接。这是我的堆栈炸弹link

希望这会有所帮助。 ng-template

上有一篇很棒的文章

Answer 4

以下是使用*ngIF时ng-template用于替换else情况的工作方式

<p *ngIf="a > b; else notTrue"> A Is Greater Than B <p>
<ng-template #notTrue>
  <> B Is Greater Than A <p>
</ng-template>

在第一段标记中创建一个名为notTrue的变量，并在 ng-template 标记中使用它，以在a < b，

为什么ng-template在Angular中不起作用？

4 个答案: