一起使用* ngIf和* ngFor。除了我当前使用的以外，还有其他选择吗？

Question

我想使用类似下面的内容

<div *ngIf="true" *ngFor="let order of orders">
  <li></li>
</div>

我用Google搜索，但没有找到任何内容。

所以我在下面用过

<div *ngIf="true">
   <div *ngFor="let order of orders">
      <li></li>
   </div>
</div>

问题是；有没有比这更好的方法了？

Answer 1

您不能在同一元素中使用两个结构指令。那是因为声明

<div *ngIf="true"></div>

将在内部扩展为

<ng-template [ngIf]="true">
  <div></div>
</ng-template>

因此，如果您使用两个指令，则微语法将无法识别要扩展的指令。

使用两个不同标记来应用指令的第二种选择是正确的使用方式。

Answer 2

是的，有更好的方法。使用ng-container

<ng-container *ngIf="true">
  <div *ngFor="let order of orders">
      <li></li>
  </div>
</ng-container>

原因：当您使用ng-container时，该元素将不会添加到DOM中

Answer 3

更好的方法是使用特殊的ng-container标签。这不会产生实际的html元素，但会产生注释：

<ng-container *ngIf="true">
   <div *ngFor="let order of orders">
      <li></li>
   </div>
</ng-container>