我有不确定的列数和未定义的字段长度。要显示它们,请输入以下代码:
<div class="col-md-6" *ngFor="let d of fields">
<div class="form-group">
<label>{{ d.displayName }}</label>
<span>{{ viewRecord[d.fieldName]}}</span>
</div>
</div
结果是:
<div class="col-md-6">
<div class="form-group">
<label>Title 1</label>
<span>Text 1....</span>
</div>
</div
<div class="col-md-6">
<div class="form-group">
<label>Title 2</label>
<span>Text 2....</span>
</div>
</div
是否有可能将这两个放入一个容器中:
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Title 1</label>
<span>Text 1....</span>
</div>
</div
<div class="col-md-6">
<div class="form-group">
<label>Title 2</label>
<span>Text 2....</span>
</div>
</div
</div>
请注意我不知道字段的数量,因此我必须从字段总数中将模数设为2,以将字段包装成一个容器。很明显,包装器将在循环之外。我被卡住了。)
请注意我正在寻找模板驱动的答案。如果没有,我可以应付它。我自己写的任何JavaScript;)
答案 0 :(得分:5)
您可以使用*ngFor
,odd
和even
项的内置功能。像往常一样迭代项目,但仅在迭代even
项时显示结果。并使用index
直接从项目访问项目。
<div class="row">
<div *ngFor="let d of fields; let index=index; let odd=odd; let even=even;">
<div *ngIf="even">
<div class="form-group" class="col-md-6">
<label>{{ fields[index].displayName }}</label>
<span>{{ viewRecord[fields[index].fieldName]}}</span>
</div>
<div class="form-group" class="col-md-6">
<label>{{ fields[index+1].displayName }}</label>
<span>{{ viewRecord[fields[index+1].fieldName]}}</span>
</div>
</div>
</div>
</div>
这绝对不是最好的解决方案(因为我定义了两次相同的模板),但是应该可行。