Как использовать ngFor, чтобы карты оставались в ряд в Angular 6? - PullRequest
Новая
       33

Как использовать ngFor, чтобы карты оставались в ряд в Angular 6?

0 голосов
/ 18 января 2019

ngFor сгенерированные карты накладываются друг на друга, а не остаются в ряд.

Я генерирую карты через ngFor. Я использую fxFlex="30" для каждой карты, но они накладываются друг на друга. Я использовал flex-wrap также, но не работал. 

<div fxFlex *ngIf="designs" [@expand]>
  <div fxLayout="column" fxLayout.gt-sm="row" style="display: inline" *ngFor="let design of designs">
    <div fxFlex="30">
      <mat-card>
        <mat-card-header>
          <mat-card-title>
            <h2>{{design.label}}</h2>
          </mat-card-title>
          <mat-card-subtitle>
            <h3>{{design.time}}hr</h3>
          </mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src="{{BaseURL + design.image}}">
        <mat-card-content>
          <p>{{design.description}}</p>
        </mat-card-content>
        <mat-card-actions style="margin: auto;">
          <button mat-stroked-button routerLink="/contact" color="primary">Book Now</button>
        </mat-card-actions>
      </mat-card>
    </div>
  </div>
</div>

Я хочу, чтобы мои сгенерированные карты были в ряд. Но на самом деле они сложены друг на друга.

1 Ответ

0 голосов
/ 19 января 2019

Важно обратить внимание на мелкие детали на странице Angular Flex . Подобные вещи начинали с меня несколько раз, когда я не был знаком с flex до его использования.

Использование fxLayout в основном говорит элементу, что это за контейнер . В этом случае вы, вероятно, захотите переместить свой *ngFor в тот же div, который имеет fxFlex="30", и, если повезет, вы сможете переместить их обоих на карту. 

<div fxFlex *ngIf="designs" [@expand]>
  <div fxLayout="column" fxLayout.gt-sm="row" style="display: inline">
    <div fxFlex="30" *ngFor="let design of designs">

В зависимости от того, для чего вам это нужно, Grid также может сильно помочь.

...