扫码关注官方订阅号
我是编程新手。
我想尝试使用角度按行显示元素,并且每行限制 3 个元素。 (使用 *ngFor)
例如,像这张图片 按行 3 个元素
我使用切片管道,但这只需要第 3 个元素。
任何人都可以帮助我或向我展示代码示例
您可以使用简单的 *ngFor 并使用 CSS Grid 与任何行或列对元素进行排序。另外,您可以添加 grid-auto-flow: column; 对列中的元素进行排序。
*ngFor
CSS Grid
grid-auto-flow: column;
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { public arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8]; }
* { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container { width: 100%; padding: 5px; box-sizing: border-box; display: grid; gap: 10px; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; } .element { border: 2px solid black; text-align: center; font-weight: bold; padding: 5px; font-size: 12px; }
Element {{ element }}
您可以在 stackblitz 上尝试此代码
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
您可以使用简单的
*ngFor并使用CSS Grid与任何行或列对元素进行排序。另外,您可以添加grid-auto-flow: column;对列中的元素进行排序。import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { public arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8]; }* { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .container { width: 100%; padding: 5px; box-sizing: border-box; display: grid; gap: 10px; grid-template-rows: repeat(3, auto); grid-template-columns: repeat(3, 1fr); grid-auto-flow: column; } .element { border: 2px solid black; text-align: center; font-weight: bold; padding: 5px; font-size: 12px; }您可以在 stackblitz 上尝试此代码