angular 6 циклов по bootstrap столбцу и сетке - PullRequest
Новая
       86

angular 6 циклов по bootstrap столбцу и сетке

0 голосов
/ 02 августа 2020

вот мой angular код, он извлекает данные из бэкэнда и показывает это пользователю через пользовательский интерфейс как CArds 

<div class="container" >
  <div class="row" >
    <div class="col-sm" *ngFor="let item of post" >

      <mat-card class="example-card" >
        <mat-card-header>
          <div mat-card-avatar class="example-header-image"></div>
          <mat-card-title>{{item.title}}</mat-card-title>
          <mat-card-subtitle>50% off</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src=asset/logo_500.png" alt="Photo of a Shiba Inu">
        <mat-card-content>
          <p>
content
            <br>
            click on "+" button

          </p>
        </mat-card-content>
        <mat-card-actions>
          <button mat-button>LIKE</button>
        </mat-card-actions>
      </mat-card>


    </div>
    
  </div>
</div>

, но проблема здесь в том, что он извлекает все объекты и отображает эти данные в есть ли этот единственный полный столбец, где мы могли бы фильтровать, добавив условие к этой части

таким образом, чтобы он проверял, имеет ли этот столбец более 3 объектов, а затем он должен получить эти остальные объекты для следующего row или любое другое возможное решение для l oop объектов через столбцы и строки в angular

Note:https://material.angular.io/components/grid-list/overview(I've tried this )
searched for solution to iterate that row part
tried to implement For login in that div row part

1 Ответ

1 голос
/ 02 августа 2020

Bootstrap - это 12-сеточная система, мы хотим, чтобы в каждой строке было 3 символа, поэтому 12/3 = 4 В Bootstrap 4: - 

<div class="col-4" *ngFor="let item of post" >

В Bootstrap 5, у нас есть еще один опция -define in row напрямую: - 

<div class="row row-cols-4" >
...