Как вложить html при циклическом просмотре массива с помощью Angular + ngFor / ng-template?

Question

Я пытаюсь вывести html в следующем формате для массива

weekDaysHeaderArr, длина которого составляет 42 = 6 x 7.

Другими словами, я хочу вкладывать каждые 7элементы столбца div в строке div (всего 6), например так.

<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>
<div class="row">
    <div class="col-md-auto"> <-- **repeated 7 times**
    </div>
</div>

Я могу использовать ngFor, чтобы явно создать один и тот же HTML-элемент (div class="col-md-auto">) 42 раза, но как я вкладываю каждые 7элементы внутри <div class="row">?

Я раньше не пользовался ng-template и ng-container и не могу разобраться с документацией, могут ли они быть использованы для этого?Насколько я могу судить, они предназначены для переключения между HTML-элементами, а не для вложения.

Answer 1

Вы можете сделать что-то вроде этого ...

<div class="row" *ngFor="let week of [0,1,2,3,4,5]">
    <div class="col-md-auto" *ngFor="let day of [0,1,2,3,4,5,6]">
    </div>
</div>

затем, чтобы получить индекс от weekDaysHeaderArr, вы можете сделать ....

 weekDaysHeaderArr[week * 7 + day];

Answer 2

Создать матрицу из вашего массива

private weekDaysHeaderArr = [ /*Your elements here*/ ]
private groupSize: number = 7;
get matrix(){ 
  return this.weekDaysHeaderArr.map((item, index, arr)=>{
    return index % this.groupSize === 0 ? arr.slice(index, index + this.groupSize) : null; 
  })
  .filter((item) => { return item; });
}

Затем используйте его внутри своего шаблона следующим образом

<div class="row" *ngFor="let week of matrix">
    <div class="col-md-auto" *ngFor="let day of week">
    </div>
</div>

Answer 3

Вложение петель в угловых шаблонах довольно просто. Если у вас есть два отдельных массива, вы можете сделать следующее:

const sixThings = [1, 2, 3, 4, 5, 6]

const weekdays = ['mon', 'tue', 'wed']

<div class="row" *ngFor="let thing of sixThings"> <-- **repeated 6 times**
    <div class="col-md-auto" *ngFor="let weekday of weekdays"> <-- **repeated 7 times**
    </div>
</div>

Я обновлю ответ позже для случая, когда у вас уже есть вложенный массив или вы можете его создать.