使用引导网格通过 ngFor 显示来自 api 调用的项目答案

【问题标题】：Using bootstrap grid to display items from api call with ngFor使用引导网格通过 ngFor 显示来自 api 调用的项目
【发布时间】：2019-08-28 18:04:57
【问题描述】：

我通过 api 调用从 The Movie Database 获取数据。

然后我想使用引导网格系统显示数据。

这是目前使用 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>

当我切换到移动视图时，问题就开始了。

Angular 材质的网格系统不会像 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>

如果返回的值太多而无法容纳在一行中，则会使用相同数量的列创建一个全新的行。

有人知道如何做到这一点吗？提前感谢您花时间阅读并尝试提供帮助:)

【问题讨论】：

只需将它们都放在同一个.row 中。这些列自然会换行到下一行。
我试过了，一开始没有用，但后来我意识到问题是没有安装引导程序。不过现在一切都修好了，非常感谢！

标签： html angular bootstrap-4 ngfor bootstrap-grid

【解决方案1】：

类似

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

任意列的引导类，根据分辨率选择看起来不错的类。

【讨论】：