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

因此，基本上，您有一个具有动态大小的数组，比方说：["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"]

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

希望有帮助。

Answer 2

我的建议是使用其他方法。如果您使用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中）扩展功能要容易得多

Answer 3

您可以使用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>

Angular7 +，* ng每行X个项目，最佳做法

3 个答案: