将离子卡与 Angular 指令垂直对齐答案

【问题标题】：Vertically align Ionic cards with Angular directives将离子卡与 Angular 指令垂直对齐
【发布时间】：2019-04-08 07:49:33
【问题描述】：

我正在尝试使用 Ionic 框架进行简单的卡片收集。

我正在使用 SpaceX API 来填充卡片。我的代码包括角度指令。我建立了这个：

<ion-grid>
  <ion-row>
    <ion-col col-4>
      <ion-card *ngFor="let launch of list_launches">
        <ion-card-header>
          {{ launch.mission_name }}
        </ion-card-header>
        <ion-card-content>
          <ion-thumbnail item-start>
            <img src="{{launch.links.mission_patch_small}}">
          </ion-thumbnail>
        </ion-card-content>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

这个*ngFor="let launch of list_launches" 用于从对象list_launches 中获取一些属性。

我找到了这个解决方案：

<ion-row>
    <ion-col col-4>
      Left
    </ion-col>
    <ion-col col-4>
      Middle
    </ion-col>
    <ion-col col-4>
      Right
    </ion-col>
 </ion-row>

但是当我使用 *ngfor 参数时，这不能正常工作。想要垂直对齐这张 Ionic 卡片。

【问题讨论】：

现在您将所有卡片放在同一列中。只需将*ngFor 放在ion-col 而不是ion-card 上，它应该可以正常工作。

标签： css angular ionic-framework

【解决方案1】：

所以这里的问题是 Ionic 网格需要一个非通用模板来构建更复杂的网格。我总是觉得这些布局组件太过分了，因为大多数事情都可以通过几个 CSS 声明来完成。在您的情况下，我根本不会使用离子网格并将其写入CSS Grid。两个简单的 CSS 规则可以解决这个问题：

display: grid;
grid-template-columns: 1fr 1fr 1fr;

我在这里创建了一个非常基本的网格，并告诉它它有三个相同大小的列（1fr 表示 1 个分数）。

你也可以使用repeat函数

display: grid;
grid-template-columns: repeat(3, 1fr);

代码也少了很多：

<div style="display: grid;grid-template-columns: 1fr 1fr 1fr;">
  <ion-card  *ngFor="let launch of list_launches">
    <ion-card-header>
      {{ launch.mission_name }}
    </ion-card-header>
    <ion-card-content>
      <ion-thumbnail item-start>
        <img src="">
      </ion-thumbnail>
    </ion-card-content>
  </ion-card>
</div>

https://stackblitz.com/edit/ionic-7qd5xf

更新：正如 Thomas 在 cmets 中所建议的，在 ion-col 本身上使用 *ngFor 指令也足够了：

<ion-row>
  <ion-col col-4 *ngFor="let launch of list_launches" >
    <ion-card >
      <ion-card-header>
        {{ launch.mission_name }}
      </ion-card-header>
      <ion-card-content>
        <ion-thumbnail item-start>
          <img src="">
        </ion-thumbnail>
      </ion-card-content>
    </ion-card>
  </ion-col>
</ion-row>

【讨论】：