带有 ngFor 的 Angular Flex 布局，每行 X 个元素

Question

我试图按照这篇文章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。

Answer 1

您的代码（源自另一个 SO 问题）不起作用，因为fxLayoutWrap根据Angular Flex-layout的变更日志已弃用。相反，您应该将其直接设置为fxLayout属性才能生效：

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

是结果。我还在regularDistribution变量中添加了一个百分比符号：100 / 3 + '%'.

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

这是一个更新的 StackBlitz，可以解决您的问题。如果视口大于fxFlex.gt-md，它将每行显示三个项目。