Как отображать элементы массива в нескольких строках в приложении Angular - PullRequest
Новая
       30

Как отображать элементы массива в нескольких строках в приложении Angular

0 голосов
/ 23 февраля 2019

В моем приложении Angular в моем файле .ts есть массив компаний, которые отображаются в моем HTML-коде с помощью ngFor в следующем коде: 

<div class="card-deck">
  <div class="card" *ngFor="let company of companies">
      <div class="card-body">
         <h5 class="card-title">         
             {{ company.companyName }}
          </h5>
       </div>
  </div>
</div>

Приведенная выше колода карт отображает весь список компаний в одной строке.

Например, если есть 3 компании, они отображаются в одном ряду на экране.Если существует 10 компаний, они отображаются в одну строку.

Может кто-нибудь сообщить мне, какие изменения мне нужно внести в мой TS или HTML, чтобы я мог установить количество компанийв каждом ряду?Т.е. показывать только 3 компании в одном ряду, а затем переходить в следующий.

Заранее большое спасибо.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2019

Одним из простых способов было бы просто добавить style к вашей карте div, например: 

<div class="card-deck">
  <div class="card" *ngFor="let company of companies" style="width:33%; display: inline-block; text-align: center">
      <div class="card-body">
         <h5 class="card-title">         
             {{ company.companyName }}
          </h5>
       </div>
  </div>
</div>

Вы можете просмотреть вывод кода выше здесь

0 голосов
/ 23 февраля 2019

В качестве возможного решения вы можете создать многомерный массив из companies и использовать два *ngFor (итерировать по строкам, а затем итерировать по companies).

// component.ts

companies = [{
    companyName: 'first'
  },
  {
    companyName: 'second'
  },
  {
    companyName: 'third'
  }
  ...
] // for example, ten elements in companies

companiesInRow: number = 3; // number of companies in row
rows;

ngOnInit() {
  // create multidimensional array
  this.rows = this.companies.reduce((acc, value, index) => {
    if (index % this.companiesInRow == 0 && index !== 0) acc.push([])
      acc[acc.length - 1].push(value)
    return acc;
  }, [[]]);
}


// component.html
<div class="card-deck" *ngFor="let comps of rows">
  <div class="card" *ngFor="let company of comps">
    <div class="card-body">
      <h5 class="card-title">         
         {{ company.companyName }}
      </h5>
    </div>
  </div>
</div>

Чек Stabblitz

...