英文:
Show specific number of items for each row dynamically
问题
我想使用ngFor循环从数组中渲染元素。数组的大小可能不同。
我希望始终使数组中的5个元素成为一行。
例如，如果我的数组大小为七：
元素 元素 元素 元素 元素
元素 元素
或者大小为15：
元素 元素 元素 元素 元素
元素 元素 元素 元素 元素
元素 元素 元素 元素 元素
等等。
首先不太重要的是使用哪种HTML元素。我只想了解如何在Angular中使用ngFor来实现这一点。
英文:
I want to render elements from an array using an ngFor loop. The array can be of different sizes.
I want that always 5 elements of an array make one row.
For example, if my array were of size seven:
Element Element Element Element Element
Element Element
Or of size 15:
Element Element Element Element Element
Element Element Element Element Element
Element Element Element Element Element
etc.
What kind of HTML elements is not relevant at first. I just want to understand how this could be implemented with ngFor in Angular.
答案1
得分: 1
你可以使用 grid 来实现它。
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.grid > div {
border: 1px solid;
padding: 0px 8px;
box-sizing: border-box;
}
<div class="grid">
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Baz</div>
<div>Baz</div>
<div>Baz</div>
</div>
或者，如果你愿意，你可以使用 flex 布局来实现：
.flex {
display: flex;
flex-flow: row wrap;
gap: 16px;
width: 100%;
}
.flex > div {
border: 1px solid;
flex: 0 1 calc(20% - 16px);
padding: 0px 8px;
box-sizing: border-box;
}
<div class="flex">
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Baz</div>
<div>Baz</div>
<div>Baz</div>
</div>
附带说明：如果使用 flex 方法，当需要处理响应式时，会更加方便。例如，你可以添加 flex-wrap: wrap 和 div 元素的 min-width，然后让 flex 处理它。另一方面，如果使用 grid 方法，你可以简单地添加一些 @media 查询，然后更改 grid-template-columns 如何渲染项目。这取决于你，但无论哪种方式都是有效的。
英文:
You can achieve it using grid.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
}
.grid > div {
border: 1px solid;
padding: 0px 8px;
box-sizing: border-box;
}
<!-- language: lang-html -->
<div class="grid">
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Baz</div>
<div>Baz</div>
<div>Baz</div>
</div>
<!-- end snippet -->
Or, if you want, you can achieve it using a flex layout:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.flex {
display: flex;
flex-flow: row wrap;
gap: 16px;
width: 100%;
}
.flex > div {
border: 1px solid;
flex: 0 1 calc(20% - 16px);
padding: 0px 8px;
box-sizing: border-box;
}
<!-- language: lang-html -->
<div class="flex">
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Foo</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Bar</div>
<div>Baz</div>
<div>Baz</div>
<div>Baz</div>
</div>
<!-- end snippet -->
Sidenote : using the flex approach you would have a much easier life when (and if) dealing with responsiveness. IE: you could add a flex-wrap: wrap and a min-width to the divs and let flex handle it.
On the other hand, if using the grid approach, you could simply add some @media and change how grid-template-columns render the items.
That's up to you, but anyway both ways are valid.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论