使用ngFor的角度flex-layout

Question

我是flex-layout的新手,无法修复以下内容:

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

我的ngFor:

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

结果:

如果我只想连续3个国家,换句话说,如果我想让最后一个'德国'成为下一行怎么办？

这只能通过创建多个fxLayout来实现吗？我指的是2个循环,1表示创建fxLayout的数量,另一个内循环表示我的国家组件(fxFlex项目).提前致谢!

Answer 1

我找到了解决方案:如何使用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>