Показать матрицу, используя один массив angular component.html - PullRequest
Новая
       7

Показать матрицу, используя один массив angular component.html

2 голосов
/ 17 марта 2019

У меня есть массив, предположим, что [1,2,3,4,5,6,7,8,9,10] хочет сделать матрицу nxn на html стороне угловой.

Я знаю, что могу сначала разделить массив на 2d in typescript file [[1,2,3,4,5],[6,7,8,9,10]] и перебрать элементы в html, используя * ngFor.

Но я пытаюсь найти способ показать матрицу с использованием одного массива в component.html без преобразования его в 2d массив.

output: 

1 2 3 4 5
6 7 8 9 10

Ответы [ 3 ]

3 голосов
/ 17 марта 2019

Если вы хотите отобразить матрицу в шаблоне без какой-либо логики на стороне машинописного текста, вы можете использовать Array.prototype.slice , чтобы сгенерировать массив до вашего количества строк.Затем выполните итерацию в этом массиве с помощью ngFor и получите индекс из переменной index, это будет ваш индекс строки.

Затем снова используйте внутренние ngFor и slice, чтобы получить строку изваш массив и индекс строки.

Вы просто должны установить n для количества элементов в строке: 

<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>

См. эту демонстрацию stackblitz .

Однако я думаю, что более элегантным решением было бы создать матрицу из массива в машинописном тексте, а затем просто выполнить итерации по строкам и столбцам: 

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));

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

Или вы можете создать эту матрицу, используя трубу в угловую, что-то вроде этого, с длиной строки 4: 

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

Тогда труба будет содержать логику для создания матрицы: 

@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));
  }
}
1 голос
/ 17 марта 2019

Вы можете просто использовать оператор %. 

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)
1 голос
/ 17 марта 2019

Вы можете достичь этого, выполнив следующие действия.Я покажу оба примера, один с массивом 2d, а другой с одним.

2d Array 

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];

1D Array 

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];
...