Блог

Я пытаюсь вывести 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, а не для вложения.

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

 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>  

Вложение циклов for в шаблон angular довольно простое. Учитывая, что у вас есть два отдельных массива, вы можете сделать следующее:

 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>
  

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

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

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