Как реализовать фиксированные столбцы div внутри ngFor? - PullRequest
Новая
       7

Как реализовать фиксированные столбцы div внутри ngFor?

0 голосов
/ 17 сентября 2018

Я хочу реализовать дизайн, в котором у меня есть динамический массив данных, и я хочу отобразить их только в 3 загрузочных столбцах на строку, например: 

<div class="row">

  <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

 <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

 <div class="col-md-4">
   <a>data</a>
   <a>data</a>
   <a>data</a>
  </div

</div>

Вывод должен выглядеть следующим образом:

enter image description here

Но когда я добавлю *ngFor в столбец div следующим образом: 

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

это не дасттот же результат с первым статическим подходом, любая помощь, чтобы воспроизвести динамическое зацикливание данных, чтобы дать тот же результат?

1 Ответ

0 голосов
/ 17 сентября 2018

Вы можете сделать это так: 

columns: string[][] = [];
ngOnInit() {
    const itemsInColumn = Math.floor(this.data.length()/3);
    columns[0] = data.slice(0, itemsInColumn);
    columns[1] = data.slice(itemsInColumn, itemsInColumn * 2);
    columns[2] = data.slice(itemsInColumn * 2);
}

В шаблоне: 

<div class="row">
     <div class="col-md-4" *ngFor="let c of columns">
          <a *ngFor="let d of c">{{d}}</a>
     </div>
</div>
...