Question

我知道如何使用ngFor创建多个元素。

// component's data
items = [
    {'name': 'Item 1'},
    {'name': 'Item 2'},
    {'name': 'Item 3'},
    {'name': 'Item 4'},
    {'name': 'Item 5'},
    {'name': 'Item 6'},
];
....
<div class="row" *ngFor="let item of items">
  <div class="col">
    <label><input type="radio">{{item.name}}</label>
  </div>
</div>
....

但今天我想用angular2为组创建每个3个元素。

....
<div class="row">
  <div class="col">
    <label><input type="radio">Item 1</label>
  </div>
  <div class="col">
    <label><input type="radio">Item 2</label>
  </div>
  <div class="col">
    <label><input type="radio">Item 3</label>
  </div>
</div>
<div class="row">
  <div class="col">
    <label><input type="radio">Item 4</label>
  </div>
  <div class="col">
    <label><input type="radio">Item 5</label>
  </div>
  <div class="col">
    <label><input type="radio">Item 6</label>
  </div>
</div>
....

我不想修改我的数组结构。怎么办？我可以搬出ngFor元素吗？谢谢你的帮助。

Answer 1

您可以创建一个管道，将元素首先分组为沿着这些行的子数组：

@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
  transform(arr: [], groups: number): any {
    return arr.reduce((res, item) => {
      if (res.length === 0 || (res[res.length - 1] && res[res.length - 1].length === groups)) {
        res.push([]);
      }
      res[res.length - 1].push(item);
      return res;
    }, []);
  }
}

然后您可以按如下方式使用它：

<div class="row" *ngFor="let group of items | groupBy:3">
  <div class="col" *ngFor="let item of group">
    <label><input type="radio">{{item.name}}</label>
  </div>
</div>

当然这可能会影响性能，但是可读性，灵活性并且尊重您不改变初始数据结构的愿望 - 它只会在渲染时通过管道进行转换，并且它是透明的。

不要忘记在您的模块中注册您的管道，例如通过declarations部分。

注意：管道代码可能会得到改进，它只是一个原始实现。

Answer 2

可能不是最好的解决方案，但你可以做这样的事情

sudo dhclient -r

如何创建动态二维元素

2 个答案: