Question

我正试图有条理地将我的bootstrap col-xs-4的三个包装成一排。我的col-xs-4渲染很好，但我无法弄清楚如何让它们连续地包裹起来。这是我的当前不是NgFor：

 <div class="col-xs-4" *ngFor='let linkGroup of linkGroups | siteMapText: siteMapTextFilter; let i=index'>
        <ul class="list-unstyled">
            <li class="heading">
                <div class="clearfix">
                    <span [className]="linkGroup.ContainerCssClass">
                        <span [className]="linkGroup.CssClass"></span>
                    </span>
                    <a href="#">
                        <strong class="heading-text">{{linkGroup.Title}}</strong>
                    </a>
                </div>
            </li>
            <li *ngFor='let link of linkGroup.Links'>
                <a href="#" class="link">
                    <span [className]="link.CssClass"></span>
                    <span class="item">{{link.Title}}</span>
                </a>
            </li>
        </ul>
    </div>

我想做的是这样的事情，但我知道它的错误，所以正确的做法是什么：

 <div *ngIf='i % 3== 0' class="row">
        <div class="col-xs-4" *ngFor='let linkGroup of linkGroups | siteMapText: siteMapTextFilter; let i=index'>
            <ul class="list-unstyled">
                <li class="heading">
                    <div class="clearfix">
                        <span [className]="linkGroup.ContainerCssClass">
                            <span [className]="linkGroup.CssClass"></span>
                        </span>
                        <a href="#">
                            <strong class="heading-text">{{linkGroup.Title}}</strong>
                        </a>
                    </div>
                </li>
                <li *ngFor='let link of linkGroup.Links'>
                    <a href="#" class="link">
                        <span [className]="link.CssClass"></span>
                        <span class="item">{{link.Title}}</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

修改

Gunter建议的答案就是重新组织要分组成行的数据。然后我可以将模板组织到这个：

<div class="row" *ngFor='let linkRow of linkRows| siteMapRowText: siteMapTextFilter'>
    <div class="col-xs-4" *ngFor='let rowCol of linkRow.RowGroups'>
        <ul class="list-unstyled">
            <li class="heading">
                <div class="clearfix">
                    <span [className]="rowCol.ContainerCssClass">
                        <span [className]="rowCol.CssClass"></span>
                    </span>
                    <a href="#">
                        <strong class="heading-text">{{rowCol.Title}}</strong>
                    </a>
                </div>
            </li>
            <li *ngFor='let link of rowCol.Links'>
                <a href="#" class="link">
                    <span [className]="link.CssClass"></span>
                    <span class="item">{{link.Title}}</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Answer 1

<强>更新

您可以使用一个管道来创建一个新的数组，该数组将4个项目组合成一个数组，这样您就可以得到一个数组数组，然后使用嵌套的ngFor

@Pipe({ name: 'cols' })
export class ColsPipe implements PipeTransform {
    transform(value: any[], cols: number) {
        var result: any[] = [];
        while(value.length) {
            result.push(value.splice(0, cols));
        }
        return result;
    }
};

另见How to split a long array into smaller arrays, with JavaScript

然后像

一样使用它

@NgModule({
  declarations: [ColsPipe],
  exports: [ColsPipe]
})
class MySharedModule()

@NgModule({
  imports: [MySharedModule],
  ...
})
class ModuleWhereColsPipeIsUsed {}

@Component({
  selector: '...',
  template: `
  <div class="row" *ngFor='let linkGroupRow of linkGroups | siteMapText: siteMapTextFilter | cols:4; let i=index'>
    <div class="col-xs-4" *ngFor='let linkGroup of linkGroupRow'>...</div>
  </div>
  `
})

<强>原始

这可以使用ngTemplateOutlet

来实现

首先，我们创建一个可重用的组件：

<template #linkGroupTemplate>
    <div class="col-xs-4">
        <ul class="list-unstyled" let-linkGroup="linkGroup"
                >
            <li class="heading">
                <div class="clearfix">
                    <span [className]="linkGroup.ContainerCssClass">
                        <span [className]="linkGroup.CssClass"></span>
                    </span>
                    <a href="#">
                        <strong class="heading-text">{{linkGroup.Title}}</strong>
                    </a>
                </div>
            </li>
            <li *ngFor='let link of linkGroup.Links'>
                <a href="#" class="link">
                    <span [className]="link.CssClass"></span>
                    <span class="item">{{link.Title}}</span>
                </a>
            </li>
        </ul>
    </div>
</template>

let-linkGroup="linkGroup"声明一个上下文变量linkGroup，它引用传递的上下文的linGroup属性。

然后我们使用ngFor内的模板，并在每第4个项目上使用<div class="row">包装，否则将解包。

<击>

<template ngFor let-linkGroup [ngForOf]="linkGroups |siteMapText:siteMapTextFilter" let-i="index">
  <template [ngIf]="i % 3 === 0">
    <div class="row">
     <template [ngTemplateOutlet]="linkGroupTemplate" [ngOutletContext]="{'linkGroup': linkGroup}">
    </div>
  <template>

  <template [ngIf]="i % 3 !== 0">
     <template [ngTemplateOutlet]="linkGroupTemplate" [ngOutletContext]="{'linkGroup': linkGroup}">
  </template>
</template>

<击>

<ng-container *ngFor="let linkGroup of linkGroups |siteMapText:siteMapTextFilter" let-i="index">
  <ng-container *ngIf="i % 3 === 0">
    <div class="row">
     <template [ngTemplateOutlet]="linkGroupTemplate" [ngOutletContext]="{'linkGroup': linkGroup}"></template>
    </div>
  <ng-container>

  <ng-container *ngIf="i % 3 !== 0">
     <template [ngTemplateOutlet]="linkGroupTemplate" [ngOutletContext]="{'linkGroup': linkGroup}"></template>
  </ng-container>
</ng-container>

使用[ngOutletContext]="{'linkGroup': linkGroup}"，我们将实际的linkGroup值包装在另一个对象中，以便我们可以像以前一样在模板中访问它。否则我们需要为我们想要使用的每个属性声明一个变量

let-CssContainerCssClass="ContainerCssClass" let-CssClass="CssClass" let-Title="Title" let-Links="Links"

并从所有绑定中删除linkGroup.。

有关使用ngTemplateOutlet和ngOutletContext的示例（使用Plunker），另请参阅How to repeat a piece of HTML multiple times without ngFor and without another @Component。

Angular2 ngFor父元素

1 个答案: