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

Question

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

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

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

目前最佳解决方案：

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

有人用过解决方案吗？或者最新版本的 Angular?

引入了更好的东西

提前致谢！

Answer 1

我的建议是使用不同的方法。如果您使用 bootstrap flexbox Wrap，并且宽度固定，您仍然可以使用单个 *ngFor，结果将在每 3 个项目后生成 "line-breaks"（如果您强制它适合 3 个项目连续）。

所以像这样：

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

这样也可以更容易地扩展未来可能更短行的功能（例如在响应式、移动友好的 UI）

Answer 2

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

为此，您可以使用此代码段：

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 来构建列。请注意最后一个数组的想法，根据原始数组的大小，您可能没有正确的长度。您将需要 "complete" 最后一个带有空值或任何您想要的数组。

希望对您有所帮助。

Answer 3

您可以使用 lodash 创建一个元素数组，按照 size 的长度分成几组。 _.chunk(数组，[大小=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>

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

Angular7+, *ngFor X amount of items per row, best practice

bootstrap-4

angular

angular7