Angular 为什么ng模板不能在角度模式下工作？

我们不能在同一个元素上使用

*ngFor

和

*ngIf

。一种技术是将它们嵌套。几乎任何地方都可以，除了在表中，当我们想循环

tr

并有条件地打印它们时

因为我们应该使用

或元素，这样它就不会被打印到DOM中

但我不能让它工作。它根本不打印任何东西

---

我该怎么办？

由于*ngIf被呈现为[ngIf]，请尝试直接在模板上使用[ngIf]，它应该可以工作

当我们在指令前面加*时，我们告诉它使用 它作为模板附着到的元素。基本上，ngIf是 ng模板+[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>

{{item.year}
{{item.month}

或者干脆用*ngIf来装饰

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

{{item.year}
{{item.month}

更新

---

对结构指令有用，因此也有一种称为ng container的东西

ng容器和ng模板目前都是（2.x，4.x） 用于将元素组合在一起，而不必引入其他元素 将在页面上呈现的元素（例如div或span）

ng模板和ng容器之间的区别是

ng模板用于结构指令，如ng if、ng for和ng switch。如果在没有structural指令的情况下使用它，则不会发生任何事情并渲染

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

就你而言

用于声明模板。这里需要隐藏/显示一些节点

因此，您需要使用ng容器来处理相同的问题

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

{{item.year}
{{item.month}

这里有几个链接可以帮助你理解两者

相关的

---

关于ng模板和ng容器

以下是在使用

*ngIF

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

a大于b
B大于A

---

在第一个段落标记中，创建一个名为

notTrue

的变量，并在ng模板中使用它标记打印段落中的行，如果

a

，

我希望您现在已经找到了答案。这是为那些还没有找到答案的人准备的。 解释

ng template

的更好方法是使用一个模板元素，该元素与一个结构化指令（*ngIf，*ngSwitch）一起使用，该指令被编译以生成其中的结构。将上述结构指令与ng模板一起使用的问题是，当*ngIf为true时，将生成一个模板。但是我们没有指定应该呈现这个模板。另一种方法是使用*ngIf作为[ngIf]属性绑定值，其中属性绑定本身应该是布尔值

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

（我无法使用pluker链接。这是我的stackblitz

希望这有帮助。这方面有一篇很棒的文章