Angular7 +, * ngДля X элементов в строке, лучшая практика

Question

Я начал несколько месяцев назад использовать Angular для своих проектов, и у меня возникла ситуация, когда мне нужен совет.

Я использую Bootstrap4, и мне нужно создать строку для каждых 3 элементов, которые хранятся в массиве. Массив имеет динамический размер, поэтому, если в моем массиве 21 элемент, мне нужно создать 7 строк по 3 элемента в строке.

Я нашел много вопросов по этой теме, но я не знаю, какое решение использовать.

Лучшие решения на данный момент:

1. Использование нескольких ngIf *: https://riptutorial.com/angular2/example/32251/-ngfor-x-amount-of-items-per-row
2. Разбейте исходный массив на многомерный массив и используйте * ngFor 2 раза: https://medium.com/@miki995/angular-6-bootstrap-4-row-columns-same-height-8be5bdb53099

Кто-нибудь использовал решение? Или есть что-то лучшее, что было представлено в последних версиях Angular?

Заранее спасибо!

Answer 1

Итак, у вас есть массив с динамическим размером, скажем: ["1", "2", "3", "4", "5"]. Что вы действительно хотите сделать, так это каким-то образом иметь массив, который содержит один или несколько массивов из N значений, таких как: [["1", "2", "3"], ["4", "5"]].

Для этого вы можете использовать этот фрагмент:

function groupArray<T>(data: Array<T>, n: number): Array<T[]> {
    let group = new Array<T[]>();
​
    for (let i = 0, j = 0; i < data.length; i++) {
        if (i >= n && i % n === 0)
            j++;
        group[j] = group[j] || [];
        group[j].push(data[i])
    }
​
    return group;
}

Теперь, чтобы использовать его, просто назовите его так:

var arrayOfData: string[] = ["1", "2", "3", "4", "5"];
var group = groupArray(arrayOfData, 3);

console.log(group); // displays: ["1", "2", "3"], ["4", "5"]

В angular теперь вы можете сделать *ngFor для массива group для построения строк, а затем еще один *ngFor для построения столбцов. Будьте внимательны при последнем рассмотрении массива, у вас может не быть правильной длины в зависимости от размера исходного массива. Вам нужно будет «заполнить» последний массив пустыми значениями или чем угодно.

Надеюсь, это поможет.

Answer 2

Вы можете использовать lodash для создания массива элементов, разбитых на группы по длине. _.chunk (массив, [размер = 1])

Или используйте

let arr = [1,2,3,4,5,6,7,8];
let chunk_size = 3; //no. of elements you want to print in single row
let chunkArray = arr.map(function(e, i) {
return i % chunk_size === 0 ? arr.slice(i, i + chunk_size) : null;
})
.filter(function(e) {
return e;
});


<div class="row" *ngFor="let data of chunkArray ">
<div class ="col-md-4" *ngFor="let item of data">
{{item.name}}
</div>
</div>

Answer 3

Мой совет - использовать другой подход. Если вы используете bootstrap flexbox Wrap и с фиксированной шириной, вы все равно можете использовать один *ngFor, и результат будет генерироваться с "переносами строки" после каждых 3 элементов (если вы заставите его соответствовать 3 предмета подряд).

Так как-то так:

<div class="d-flex flex-wrap" style="width: 300px">
  <div *ngFor="let item of myArrayOfItems style="width: 10px">
  ...
  </div>
</div>

Таким образом, гораздо проще расширить функциональность и для возможных более коротких будущих строк (например, в адаптивном, дружественном к мобильному интерфейсу)