Angular Flex-макет с ngFor, X элементов в строке

Я пытался следовать этому сообщению Angular flex-layout с ngFor, чтобы делать то, что я хочу, но Я не могу это сделать.

У меня есть этот код:

<div *ngFor="let room of listRoom;">
  <div class="room">
    Room {{room.label}}
    <div *ngFor="let bed of room.beds;">
      <div class="bed">
        Bed #{{bed.label}}
        <button mat-raised-button color="accent" (click)="assignThisBed(bed)">
          Assign this bed
        </button>
      </div>
    </div>
  </div>
</div>

Мой listRooms обычно содержит от 10 до 15 элементов, и я хотел бы иметь 3 комнаты в ряду, затем разбивку, 3 комнаты, ...

Кто-нибудь может мне помочь? Спасибо..

Вот StackBlitz с моим кодом.


angular angular-flex-layout
person Helene    schedule 16.07.2018    source источник
comment
Это довольно хорошо объяснено в первом ответе. С какой ошибкой/проблемой вы столкнулись?   -  person Roy    schedule 16.07.2018
comment
Если я сделаю что-то вроде этого: ‹div fxLayout=row fxLayout.xs=column fxLayoutWrap=wrap› ‹div fxFlex.gt-xs=50% [fxFlex.gt-md]=regularDistribution *ngFor=let room of listRoom; let i = index;› Room {{room.label}} ...... ‹/div› ‹/div› Просто не работает. У меня только одна линия со всеми номерами. Я думаю, я делаю неправильно   -  person Helene    schedule 16.07.2018
comment
Стекблиц, плз   -  person Antoniossss    schedule 16.07.2018
comment
Я не вижу здесь гибкого макета....   -  person Antoniossss    schedule 16.07.2018
comment
Я редактировал с помощью ссылки stackblitz   -  person Helene    schedule 16.07.2018

Ответы (1)


arrow_upward
6
arrow_downward

Ваш код (полученный из другого вопроса SO) не работает, потому что fxLayoutWrap устарел в соответствии с журнал изменений Angular Flex-layout. Вместо этого вы должны установить его непосредственно в атрибут fxLayout, чтобы он вступил в силу:

fxLayout="row wrap" fxLayout.xs="column wrap"

является результатом. Я также добавляю знак процента к переменной regularDistribution: 100 / 3 + '%'.

<div fxLayout="row wrap" fxLayout.xs="column wrap">
  <div fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let room of listRooms;" class="room">
      Room {{room|json}}
  </div>
</div>

Вот обновленный StackBlitz, который решает вашу проблему . Если область просмотра больше fxFlex.gt-md, в каждой строке будут отображаться три элемента.

person Roy    schedule 16.07.2018
comment
Он хочет показать каждые 3 комнаты в очереди. у тебя результат не такой!!! - person Arash; 16.07.2018
comment
@Arash Это так, если экран больше, чем медиа-запрос md. - person Roy; 16.07.2018
comment
большое спасибо, именно то, что я искал !! Спасибо! - person Helene; 16.07.2018