ngFor的角度Flex布局,每行X个元素

时间:2018-07-16 09:07:39

标签: angular angular-flex-layout

我试图按照帖子Angular flex-layout with 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

1 个答案:

答案 0 :(得分:4)

您的代码(来自另一个SO问题)无法正常工作,因为changelog of Angular Flex-layout已弃用fxLayoutWrap。相反,您应该将其直接设置为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>

Here's an updated StackBlitz解决了您的问题。如果视口大于fxFlex.gt-md,则每行将显示三项。