Angular4中按条件分组渲染div：每2个col-md-4包裹于col-md-12

我来帮你搞定这个Angular4里的分组渲染问题～核心思路是先把你的数据源拆成每2个元素一组的二维数组，再通过嵌套*ngFor分别渲染外层的父容器和内层的子元素，这样就能实现每2个col-md-4被独立的col-md-12包裹的需求。

步骤1：在组件里处理数据源 #

在你的组件类中添加一个计算属性，把原始的objectProps数组切割成每2个元素一组的新数组：

export class YourComponent {
  // 你的原始数据源
  objectProps = [/* 这里是你的prop对象数组 */];

  // 获取分组后的数组
  get groupedProps() {
    const grouped = [];
    // 每2个元素切分成一组
    for (let i = 0; i < this.objectProps.length; i += 2) {
      grouped.push(this.objectProps.slice(i, i + 2));
    }
    return grouped;
  }
}

这个方法会自动帮你把数组分成若干个子数组，每个子数组最多包含2个元素，完美匹配你的分组要求。

步骤2：修改模板代码 #

现在用嵌套的*ngFor来渲染分组后的数据：外层循环负责创建每个独立的row col-md-12容器，内层循环负责填充每个分组里的col-md-4元素：

<!-- 外层循环：遍历每个分组，生成父容器 -->
<div *ngFor="let group of groupedProps" class="row col-md-12">
  <!-- 内层循环：遍历分组内的元素，生成子div -->
  <div *ngFor="let prop of group" class="col-md-4">
    <div [ngSwitch]="prop.type" class="ticket_fields">
      <div *ngSwitchCase="'Text box'">
        <input
          [name]="prop.key"
          [id]="prop.key"
          type="text"
          ngModel
          #propKey="ngModel"
          *ngIf="prop.required == 1"
          required
        >
      </div>
      <div *ngSwitchCase="'Text area'">
        <textarea
          [name]="prop.key"
          [id]="prop.key"
          ngModel
          #propKey="ngModel"
          *ngIf="prop.required == 1"
          required
        ></textarea>
      </div>
    </div>
  </div>
</div>

小提示： #

我把你原来代码里的#prop.key="ngModel"改成了#propKey="ngModel"，因为Angular不允许用.来命名模板引用变量，这会导致语法错误，这是你原来代码里的一个潜在问题哦～

最终渲染效果 #

这样修改后，生成的HTML结构就和你期望的完全一致了：

<div class="row col-md-12">
  <div class="col-md-4" > <input type="text"/> </div>
  <div class="col-md-4" > <textarea></textarea> </div>
</div>
<div class="row col-md-12">
  <div class="col-md-4" > <input type="text"/> </div>
  <div class="col-md-4" > <textarea></textarea> </div>
</div>

内容的提问来源于stack exchange，提问作者sakthi