有没有办法控制* ngFor循环中子元素的创建？

Question

我有一个数组，用于在表单模板中生成元素。为简化起见，假设该数组有2个条目。根据变量中的值，我想以一个<div>的形式包含两个<label>元素，或者是两个<div>的一个<label>元件。 （我正在尝试制作一种灵活的表单，用户可以在其中指定他/她想要多少列）。

如果我有选择地使用<div>语句创建*ngIf，那么当*ngIf表达式为false时，<div> DOM的全部内容将被删除，这将不是我想要的

当然，一种方法是根据变量将数组重新配置为一维或二维（一维有两个条目，或二维有一个条目），但这会给数组增加很大的复杂性。代码，所以我想知道Angular是否在模板级别提供了一个更简单的解决方案来实现我的目标。

我希望输出HTML为（1）：

<div>
  <label>
</div>
<div>
  <label>
</div>

or（2）。 。 。

<div>
  <label>
  <label>
</div>

取决于someFunc(i)是对还是假。

目前我所拥有的是：

  <div class="member-row" *ngFor="let subkey of allKeys; let i = index">
      <label class="member-row-label">{{subkey[1]}}:&nbsp;</label>
  </div>

产生上面的情况（1）。

是否有任何方法可以在模板中添加逻辑，以使其能够适应情况（1）或（2），而无需重新连接数组的结构和其他相关代码？我希望我忽略了一些明显的东西！

Answer 1

  

如果我可以选择使用* ngIf语句创建，那么当* ngIf表达式为false时，将删除DOM的全部内容，这不是我想要的。

未“擦除”，但从未创建。根据* ngIf下的条件，将创建一个版本的模板。在最脏的版本中：

<div *ngIf="condition">
  <label>
</div>
<div *ngIf="condition">
  <label>
</div>
<div *ngIf="!condition">
  <label>
  <label>
</div>

然后，要使其更整洁，可以遵循* ngIf-else模式（https://angular.io/api/common/NgIf）。或从整体中分离出一个单独的组件。