css - 在Angular的两列中显示来自ngFor循环的数据
问题描述
我想在两列中显示此表单。索引从 0 到 4 的元素包含在“col-md-6”类中,索引从 5 到 8 的元素包含在新的“col-md-6”中。我能做到吗?
<form [formGroup]="openingHoursForm">
<div *ngFor="let dia of selectedCenter.dias; let i = index">
<div class="dayOpeningHours" itemprop="openingHours" title="">
<div>{{ i }}</div>
<div class="opens">
<label for="">De:
<input class="form-control" id="mondayFrom" type="time" formControlName="openingTime{{ dia.diasemana }}" name="openingTime{{ dia.diasemana }}" value="{{ dia.horainicio }}">
</label>
</div>
<div class="closes">
<label for="">A:
<input class="form-control" id="mondayTo" type="time" formControlName="closingTime{{ dia.diasemana }}" name="closingTime{{ dia.diasemana }}" value="{{ dia.horafinal }}">
</label>
</div>
</div>
</div>
</form>
解决方案
使用带有 SlicePipe 的切片管道https://angular.io/api/common/SlicePipe
<div class="col-md-6">
<div *ngFor="let dia of selectedCenter.dias | slice:0:5>
...
</div>
</div>
<div class="col-md-6">
<div *ngFor="let dia of selectedCenter.dias | slice:5:9>
...
</div>
</div>
推荐阅读
- android - Android ffmpeg 命令不适用于音高和速度变化
- cordova - 添加和配置“cordova-plugin-bg-location-sender”后,在应用程序中执行构建时出错(cordova build android)
- c# - 多选数据表数据绑定的 ASP.NET CORE 控制器参数问题
- c++ - 如何在 C++ 中创建向量的向量图?
- python - 代码未读取文件,错误对象 Len() MASTERLIST
- amazon-web-services - 为什么 lambda 不会停止执行
- typescript - TypeScript 中归档的可枚举静态类的最优雅实现
- python - 依次运行多个 Keras 模型
- r - 无法将类 'c("gg", "ggplot")' 强制转换为 data.frame
- spring-boot - Couchbase 文档 ID 生成