Угловой материал и гибкая компоновка - настройте отзывчивые изображения рядом и в несколько рядов - PullRequest
Новая
       20

Угловой материал и гибкая компоновка - настройте отзывчивые изображения рядом и в несколько рядов

0 голосов
/ 23 марта 2019

У меня более 1000 дизайнов и дизайнов со временем увеличивается.

Я хочу отображать изображения размером 200 * 200 рядом и начать показ следующей строки, как только она достигнет конца.

вот мой код. 

<div fxLayout="row" fxLayoutWrap fxLayoutGap="2rem" fxLayoutAlign="center">
  <mat-card   
    *ngFor="let design of designs" >
    <img mat-card-image src="data:image/jpg;base64, {{ design.data }}" />
    <div>
      <mat-card-title>{{ design.name }}</mat-card-title>
      <mat-card-subtitle>{{ design.code }}</mat-card-subtitle>
    </div>
  </mat-card>
</div>

Я пытаюсь сделать то же самое, но более быстро, используя ngFor Ссылка

Как я могу сделать это с помощью Flex Layout?

1 Ответ

0 голосов
/ 24 марта 2019

Это работает для меня 

  <div
  class="container"
  fxLayout="row wrap"
  fxLayoutAlign="center"
  fxLayoutGap.xs="0" >

  <div class="item" fxFlex="10%" *ngFor="let design of designs">
    <div style="padding:5px">
      <div fxLayoutAlign="center">
        <img
          width="120"
          height="120"
          data-bind="attr: { src: thumbnail }" />
      </div>
      <div fxLayoutAlign="center">
        {{ design.name }}
      </div>
      <div fxLayoutAlign="center">
        {{ design.code }}
      </div>
    </div>
  </div>
</div>
...