Afficher une matrice à l'aide d'un seul composant angulaire de tableau.html

Vous pouvez y parvenir en procédant comme suit. Je vais montrer les deux exemples, l'un avec un tableau 2d et l'autre avec un tableau unique.

Tableau 2d

var a = [1,2,3,4,5,6];

now to achieve 2D like functionality first define the strength of row.
let that be L. In our case strength of row will be L = 3.

now to get an element placed at Xth row and Yth column you will use
a[Z*(X-1)+ (Y-1)]
e.g. to get element form 1st row and 2nd column we will print 

a[3*(1-1) + (2-1)] = a[1];

Tableau 1D

var a = [[1,2,3],[4,5,6]];
now to get an element placed at Xth row and Yth column you will use

a[X-1][Y-1]
e.g. to get element form 1st row and 2nd column we will print 

a[1-1][2-1] = a[0][1];

Vous pouvez simplement utiliser l'opérateur % .

let nmatrix = (n) => {
  let temp = []
  for(let i=1;i <1+(n*n); i++){
    temp.push(i)
    if(i % n === 0) {
      console.log(...temp)
      temp = []
    }
  }
}


nmatrix(4)

Si vous souhaitez afficher la matrice dans le modèle sans aucune logique côté typographie, vous pouvez utiliser Array.prototype.slice pour générer un tableau aussi long que votre nombre de lignes. Ensuite, parcourez ce tableau avec ngFor et obtenez l'index de la variable index , ce sera votre index de ligne.

Ensuite, utilisez un ngFor code> et slice à nouveau pour obtenir la ligne de votre tableau et l'index de ligne.

Il vous suffit de définir n sur le nombre d'éléments par ligne:

@Pipe({
  name: 'toMatrix'
})
export class ToMatrixPipe implements PipeTransform {
  transform(arr: number[], n: number): number[][] {
    const rows = Array.from({ length: Math.ceil(arr.length / n) }, (_, i) => i);
    return rows.map(idx => arr.slice(idx * n, idx * n + n));
  }
}

Voir cette démo de stackblitz .

Cependant, je pense qu'une solution plus élégante serait de créer une matrice à partir du tableau en tapuscrit puis de simplement itérer sur les lignes et les colonnes:

<div *ngFor="let row of arr | toMatrix:4">
  <span *ngFor="let x of row">{{ x }}</span>
</div>

<div *ngFor="let row of matrix">
  <span *ngFor="let x of row">{{ x }}</span>
</div>

Ou vous pouvez créer cette matrice en utilisant un tube angulaire, quelque chose comme ceci, avec une longueur de ligne de 4:

const arr = [1,2,3,4,5,6,7,8,9,10];
const n = 4;
const matrix = Array
  .from({ length: Math.ceil(this.arr.length / this.n) }, (_, i) => i)
  .map(i => this.arr.slice(i * this.n, i * this.n + this.n));

Ensuite le tube contiendrait la logique pour créer la matrice:

<div *ngFor="let row of arr.slice(0, arr.length / n % 1 === 0 ? arr.length / n : arr.length / n + 1); let idx = index">
  <span *ngFor="let x of arr.slice(idx * n, idx * n + n)">{{ x }}</span>
</div>