在 Angular 中的两列中显示来自 ngFor 循环的数据
Display data from ngFor loop in two columns in Angular
我想在两列中显示此表单。索引从 0 到 4 的元素包装在 'col-md-6' class 中,索引从 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>
我想在两列中显示此表单。索引从 0 到 4 的元素包装在 'col-md-6' class 中,索引从 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>