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

Мой совет - использовать другой подход. Если вы используете 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>

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

Вы можете использовать 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>

Итак, по сути, у вас есть массив с динамическим размером, скажем: ["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"]

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

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