Angular 角度7+*NGX每行项目数量，最佳实践

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

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

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

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

使用多个ngIf*：

将原始数组拆分为多维数组，并使用*NG2次：

有人使用了解决方案吗？或者，在Angular的最新版本中引入了更好的东西

---

提前谢谢

我的建议是使用不同的方法。如果使用，并且宽度固定，您仍然可以使用单个

*ngFor

，结果将在每3个项目后生成“换行符”（如果您强制它在一行中容纳3个项目）

比如说：

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

基本上，你有一个动态大小的数组，比如：
[“1”、“2”、“3”、“4”、“5”]
。
实际上，您想要做的是以某种方式拥有一个数组，该数组包含一个或多个N值数组，如：
[[“1”、“2”、“3”]、[“4”、“5”]

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

函数组数组（数据：数组，n:number）：数组{
设group=newarray（）；
​
for（设i=0，j=0；i=n&&i%n==0）
j++；
群[j]=群[j]| |[]；
组[j]。推送（数据[i]）
}
​
返回组；
}

现在，要使用它，只需这样称呼它：

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

var arrayOfData:string[]=[“1”、“2”、“3”、“4”、“5”]；
var group=groupArray（arrayOfData，3）；
console.log（组）；//显示：[“1”、“2”、“3”]、[“4”、“5”]

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

希望有帮助。
您可以使用lodash创建一个元素数组，将元素拆分为大小相同的组。
_.chunk（数组，[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>

设arr=[1,2,3,4,5,6,7,8]；
让chunk_size=3//要在单行中打印的元素数
让chunkArray=arr.map（函数（e，i）{
返回i%chunk\u size==0？arr.slice（i，i+chunk\u size）：null；
})
.过滤器（功能（e）{
返回e；
});
{{item.name}
您的问题是什么？是否希望每行包含3项？只需对每个项目使用
col-4
。我将调整我的问题，但如果我的数组中有21个项目。我想为每3个项目创建一个新行。同样，只需为每个项目使用
col-4
。如果我理解正确，您有一个动态大小的数组，比如说：
[“1”、“2”、“3”、“4”、“5”]
，您想在一个有3列权限的表中显示此数组吗？@Eastrall，是的。在您的情况下，一行将有1、2、3和第二行：4、5Eastral，对于typescript，将“var”替换为“let”，并删除functionYEs中的“function”。这是一个解决办法。这与我问题中的第2点相似。我会让你知道我是否会使用这种方法。这很有趣。但是我不知道该怎么说固定宽度。它更适合这个问题，我相信你仍然可以用宽度百分比来代替。你用百分比来尝试这个解决方案吗？它不符合我的要求。我将使用解决方案1