templates - Angular2 模板 : how to wrap contents of ngFor with DIV

Question

我有不确定的列数和未定义的字段长度。要显示它们，请使用以下代码:

<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 以将一对字段包装到一个容器中。很明显 wrapper 将在循环之外。我卡住了:)

请注意，我正在寻找模板驱动的答案。如果没有，我可以应付。我可以自己编写的任何 JavaScript ;)

Answer 1

您可以使用 *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>

这绝对不是最佳解决方案(因为我定义了两次相同的模板)，但应该可行。