首页 文章

Angular2 ngFor父元素

提问于
浏览
3

我试图有条理地将我的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>

1 回答

  • 3

    Update

    您可以使用一个管道来创建一个新的数组,该数组将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>
      `
    })
    

    original

    这可以通过 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 [ngIf] =“i%3!== 0”>
    <template [ngTemplateOutlet] =“linkGroupTemplate”[ngOutletContext] =“{'linkGroup':linkGroup}”>
    </模板>
    </模板>

    <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. .

    另请参阅How to repeat a piece of HTML multiple times without ngFor and without another @Component以获取使用 ngTemplateOutletngOutletContext 的示例(使用Plunker) .

相关问题