ngFor的角度弹性布局 [英] Angular flex-layout with ngFor

问题描述

我对flex-layout非常陌生，无法解决以下问题:

I am very new to flex-layout and having trouble fixing the following:

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

我的ngFor:

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

结果:

如果我只希望连续3个国家/地区，换句话说，如果我希望最后一个德国"位于下一行怎么办?

What If I only want 3 countries on a row, in other words what if I want the last 'Germany' to be on the next row?

只能通过创建多个 fxLayout 来做到这一点吗?我的意思是2个循环，一个循环创建 fxLayout 的数量，另一个内部循环显示我的国家/地区组成部分( fxFlex 项目).预先感谢！

Is this only possible by creating multiple fxLayout's? By that I mean 2 loops, 1 to create the number of fxLayout's and another inner loop to show my country components (fxFlex items). Thanks in advance!

推荐答案

我在以下位置找到了解决方案:

I found the solution on: 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中从右到左

wrap: multi-line / left to right in ltr; right to left in rtl

此处的键是 fxLayoutWrap ="wrap"

这篇关于ngFor的角度弹性布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！