Angulaire : Afficher les données par lignes (3 lignes uniquement)

Question

Je suis nouveau dans la programmation.

Je veux essayer d'utiliser angulaire pour afficher les éléments en lignes et limiter 3 éléments par ligne. (Utilisez *ngFor)

Par exemple, aimez cette photo 3 éléments par ligne

J'ai utilisé le pipeline slice, mais cela ne nécessite que le 3ème élément.

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

Quelqu'un peut-il m'aider ou me montrer un exemple de code

Answer 1

Vous pouvez trier les éléments d'une colonne à l'aide d'un simple *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 }}

Vous pouvez essayer ce code sur stackblitz