Angular:按行顯示資料(僅限 3 行)
P粉322918729
P粉322918729 2024-02-17 12:00:46
0
1
385

我是程式新手。

我想嘗試使用角度按行顯示元素,並且每行限制 3 個元素。 (使用 *ngFor)

例如,像這張圖片 按行 3 個元素

我使用切片管道,但這只需要第 3 個元素。

<ul>
  <li *ngFor="let item of items | slice:0:3">
   {{ item }}
  </li>
</ul>

任何人都可以幫助我或向我展示程式碼範例

P粉322918729
P粉322918729

全部回覆(1)
P粉670838735

您可以使用簡單的 *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 上嘗​​試此程式碼

#
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板