使用ngFor的角度flex-layout

Question

我是灵活布局的新手，无法解决以下问题：

https://github.com/angular/flex-layout

我的ngFor：

<div fxLayout.xs="column">
 <country fxFlex *ngFor="let country of countries" [country]="country"></country>
</div>

结果：

如果我只想连续3个国家，换句话说，如果我想要最后一个德国＆＃39;在下一行？

这是否只能通过创建多个 fxLayout 来实现？我的意思是2个循环，1个用于创建 fxLayout 的数量，另一个内部循环用于显示我的国家/地区组件（ fxFlex 项目）。提前谢谢！

Answer 1

我找到了解决方案：How to control number of items per row using media queries in Flexbox?

HTML：

<div fxLayout="row" fxLayout.xs="column" fxLayoutWrap="wrap">
  <country fxFlex.gt-xs="50%" [fxFlex.gt-md]="regularDistribution" *ngFor="let country of countries" [country]="country"></country>
</div>

打字稿：

//I use this to show of expression bindings in flex-layout and because I don't want the calculated value in the HTML.
regularDistribution = 100 / 3;

  

换行：在ltr中多行/从左到右;在rtl中从右到左

这里的关键是 fxLayoutWrap =“wrap”

Answer 2

使用angular 6和新版本的flex-layout，我的代码如下所示：

<div [fxLayout]="'row wrap'">
   ...
</div>