Question

我正在执行ngFor来打印标签/输入

colspan

但是现在我意识到，我希望将其中两个放在一行中，而不是每行一个。可以使用ngFor语句执行类似的操作吗？我知道我可以为其添加索引，但是我仍然不确定这对我有什么帮助，因为我需要将内部标签/ div加倍，并且还要处理没有偶数点的情况，所以最后一行可能只有一对而不是两个。

Answer 1

Flexbox方法可实现线性列表的2列布局

<div class="parent">
    <div class="child" *ngFor="let point of points" >
        <label for=... ></label>
        <input ...></input>
    </div>
</div>


.parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
    flex: 50%;
}

Answer 2

使用Angular，我通常更喜欢使用@angular/flex-layout。
参见https://github.com/angular/flex-layout

我为您举了一个声明布局行的示例，以便使项目从左到右对齐（我可以使用列将它们从上到下堆叠），并且wrap属性显示“如果没有还有更多空间，请换行”。

然后对于每一项，我说fxFlex="50%"“占整个宽度的50％”：

<div fxLayout="row wrap">
  <app-demo
    *ngFor="let i of [1, 2, 3, 4, 5, 6, 7]"
    fxFlex="50%"
    [index]="i"
  ></app-demo>
</div>

这是一堆https://stackblitz.com/edit/angular-flex-layout-seed-xw8ppl

* ngFor一次取两个值？

2 个答案: