Angular2 ngUntuk Elemen Induk

Perbarui

Anda bisa menggunakan pipa yang membuat array baru yang mengelompokkan 4 item ke dalam array sehingga Anda mendapatkan array array dan kemudian menggunakan ngFor bersarang

@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;
    }
};

Lihat juga Cara membagi array panjang menjadi lebih kecil array, dengan JavaScript

Lalu gunakan seperti

@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>
  `
})    

asli

Ini dapat dicapai dengan menggunakan ngTemplateOutlet

Pada awalnya kami membuat komponen yang dapat digunakan kembali:

<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" mendeklarasikan variabel konteks linkGroup yang merujuk ke properti linGroup dari konteks yang diteruskan.

Kemudian kita menggunakan template di dalam ngFor dan menggunakannya dibungkus dengan <div class="row"> pada setiap item ke-4, jika tidak dibuka.

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

Dengan [ngOutletContext]="{'linkGroup': linkGroup}" kita membungkus nilai linkGroup yang sebenarnya di objek lain sehingga kita dapat mengaksesnya seperti sebelumnya di dalam template. Kalau tidak, kita perlu mendeklarasikan variabel untuk setiap properti yang ingin kita gunakan

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

Dan hapus linkGroup. dari semua binding.

Lihat juga Cara mengulang sepotong HTML beberapa kali tanpa ngFor dan tanpa @Komponen lain sebagai contoh (dengan Plunker) yang menggunakan ngTemplateOutlet dan ngOutletContext.