Использование сетки начальной загрузки для отображения элементов из вызова API с помощью ngFor - PullRequest
Новая
       40

Использование сетки начальной загрузки для отображения элементов из вызова API с помощью ngFor

0 голосов
/ 07 апреля 2019

Я делаю вызов API для получения данных из Базы данных фильмов .

Затем я хочу отобразить данные, используя систему сетки начальной загрузки.

Вот чтов настоящее время это выглядит как использование Angular Material Grid: 

<mat-grid-list cols="5" rowHeight="2:3" gutterSize="10px">
  <div *ngFor="let movie of movies.results">
    <mat-grid-tile>
        <mat-card>
      <div
        class="thumbnail"
        [style.background-image]="getSafeStyle(movie.poster_path)"
      >
        -- id: {{ movie.id }} -- name: {{ movie.title }}
      </div>
    </mat-card>
    </mat-grid-tile>
  </div>
</mat-grid-list>

enter image description here

проблема начинается, когда я переключаюсь в мобильное представление.

Система координат углового материала не изменяет размеры элементов, как при Bootstrap.

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

В общем, я пытаюсь достичь чего-то подобного, но внутри ngFor 

<div class="row">
  <div class="col-md-4">
    API RESULT
  </div>
  <div class="col-md-4">
    API RESULT
  </div>
  <div class="col-md-4">
      API RESULT
    </div>
</div>

, и если возвращено слишком много значений, чтобы поместиться в однострока, вся новая строка создается с тем же количеством столбцов.

Кто-нибудь знает, как этого добиться?Заранее благодарим за то, что нашли время прочитать и попытаться помочь:)

1 Ответ

1 голос
/ 07 апреля 2019

Что-то вроде 

<div class="row">
  <div *ngFor="let movie of movies.results" class="col-xl-2 col-lg-3 col-md-4 col-sm-12">
<!-- contents here -->

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

...