Angular7+，*ngFor 每行 X 数量的项目，最佳实践

Question

几个月前我开始在我的项目中使用 Angular，我需要一些建议。

我正在使用 Bootstrap4，我需要为存储在数组中的每 3 个项目创建一行。该数组具有动态大小，因此如果我的数组有 21 个项目，我需要创建 7 行，每行 3 个项目。

我发现了很多关于这个主题的问题，但我不知道使用哪种解决方案。

迄今为止最好的解决方案：

1. 使用多个 ngIf*： https://riptutorial.com/angular2/example/32251/-ngfor-x-amount-of-items-per-row
2. 将原始数组拆分为多维数组，使用*ngFor 2次： https://medium.com/@miki995/angular-6-bootstrap-4-row-columns-same-height-8be5bdb53099

有人使用了解决方案吗？还是最新版本的 Angular 引入了更好的东西？

提前致谢！

Answer 1

您可以使用 lodash 创建一个元素数组，该数组按照大小的长度分成组。 _.chunk(array, [size=1])

或者使用

let arr = [1,2,3,4,5,6,7,8];
let chunk_size = 3; //no. of elements you want to print in single row
let chunkArray = arr.map(function(e, i) {
return i % chunk_size === 0 ? arr.slice(i, i + chunk_size) : null;
})
.filter(function(e) {
return e;
});


<div class="row" *ngFor="let data of chunkArray ">
<div class ="col-md-4" *ngFor="let item of data">
{{item.name}}
</div>
</div>

Answer 2

所以基本上，你有一个动态大小的数组，比如说：["1", "2", "3", "4", "5"]。 您真正想要做的是，以某种方式拥有一个包含一个或多个 N 值数组的数组，例如：[["1", "2", "3"], ["4", "5"]]。

为此，您可以使用这个sn-p：

function groupArray<T>(data: Array<T>, n: number): Array<T[]> {
    let group = new Array<T[]>();
​
    for (let i = 0, j = 0; i < data.length; i++) {
        if (i >= n && i % n === 0)
            j++;
        group[j] = group[j] || [];
        group[j].push(data[i])
    }
​
    return group;
}

现在，要使用它，只需像这样调用它：

var arrayOfData: string[] = ["1", "2", "3", "4", "5"];
var group = groupArray(arrayOfData, 3);

console.log(group); // displays: ["1", "2", "3"], ["4", "5"]

在 Angular 中，您现在可以在 group 数组上创建一个 *ngFor 来构建行，然后再创建一个 *ngFor 来构建列。 请注意最后一个数组，根据原始数组的大小，您可能没有正确的长度。您将需要使用空值或任何您想要的“完成”最后一个数组。

希望对你有帮助。

Answer 3

我的建议是使用不同的方法。如果您使用bootstrap flexbox Wrap，并且宽度固定，您仍然可以使用单个*ngFor，结果将在每 3 个项目后生成“换行符”（如果您强制它连续容纳 3 个项目） .

所以是这样的：

<div class="d-flex flex-wrap" style="width: 300px">
  <div *ngFor="let item of myArrayOfItems style="width: 10px">
  ...
  </div>
</div>

这样就可以更轻松地为未来可能的更短行扩展功能（例如在响应式、适合移动设备的 UI 中）