Angular 2在偶数/奇数项目上显示/隐藏ngFor中的包装标签答案

【问题标题】：Angular 2 show/hide wrap tag in ngFor over even/odd itemsAngular 2在偶数/奇数项目上显示/隐藏ngFor中的包装标签
【发布时间】：2017-03-02 14:14:16
【问题描述】：

我有 2 列列表。如果数组元素是奇数元素，是否可以添加，如果是偶数元素，是否可以关闭标签。

<ng-container ngFor="let item of items; let odd=odd;">
  <!-- if odd -->
    <div class="item-wrapper">
  <!-- /if -->

  <div class="item">{{item.name}}</div>

  <!-- if !odd -->
    </div>
  <!-- /if -->
</ng-container>

在 knockout.js 中，我可以这样做：

<!-- ko foreach: items -->
  <!-- ko if: $i % 2 !== 0 -->
    <div class="item-wrapper">
  <!-- /ko -->

  <div class="item">{{items.name}}</div>

  <!-- ko if: $i % 2 === 0 -->
    </div>
  <!-- /ko-->
<!-- /ko-->

布局的最终结果应该是：

<div class="item-wrapper">
   <div class="item">#NAME_1</div>
   <div class="item">#NAME_2</div>
</div>
<div class="item-wrapper">
   <div class="item">#NAME_3</div>
   <div class="item">#NAME_4</div>
</div>

【问题讨论】：

不，Angular 仅在其组件模板中支持有效的 HTML。
它是无效的html吗？最终结果是正确的 HTML
你试过了吗？应该可以的……
不仅最终结果需要正确，模板本身也需要是有效的 HTML，否则 Angular 不会解析它。
实际上，Knockout 示例也行不通。它不允许您有条件地开始或结束元素。

标签： javascript angular knockout.js ngfor

【解决方案1】：

@Pipe({name: 'split'})
export class BundlePipe implements PipeTransform {
  transform(val, size) {
    if(!size || !val || !val.length) {
      return val;
    }
    var result = [[]];
    var row = 0;
    for(int i = 0; i < val.length; i++) {
      result[row].push(val[i]);
      if(i % row === 0) {
        row++;
      }
    }
  }
}

<ng-container ngFor="let item of items | split:2; let odd=odd;">
  <div class="item-wrapper"></div>
    <div *ngFor="let p of item" class="item">{{item.name}}</div>
  </div>
</ng-container>

注意 - 未经测试 - 只是为了展示这个想法

【讨论】：