Saya mencoba untuk membungkus bootstrap col-xs-4 saya secara kondisional tiga baris. Saya memiliki rendering col-xs-4 saya dengan baik tetapi saya tidak tahu bagaimana membuatnya dibungkus secara berurutan. Ini bukan NgFor saya saat ini:

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

Apa yang ingin saya lakukan adalah sesuatu seperti ini, tetapi saya tahu itu salah, jadi apa cara yang benar untuk melakukan ini:

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

EDIT

Jawabannya seperti yang disarankan Gunter, untuk menata kembali data yang akan dikelompokkan menjadi baris-baris. Lalu saya bisa mengatur template menjadi ini:

<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>
3
cobolstinks 4 Juli 2016, 01:19
Tidak yakin apakah jawaban saya adalah apa yang sebenarnya Anda cari. Mungkin Anda ingin <div class="row"> membungkus 4 linkGroup bukan hanya yang pertama dari setiap grup 4. Ini perlu sedikit mengatur ulang kode saya.
 – 
Günter Zöchbauer
4 Juli 2016, 09:26
Tag ngif adalah tentang .Net dan bukan tentang sudut. Anda dapat menggunakan angular-ng-if.
 – 
030
8 Desember 2016, 17:23

1 menjawab

Jawaban Terbaik

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.

4
Community 23 Mei 2017, 14:46
Ini sangat dekat, terima kasih telah mengarahkan saya ke routerOutlet. Tetapi apa yang dilakukannya adalah membungkus kolom pertama itu adalah barisnya sendiri kemudian merender dua kolom berikutnya di luar elemen baris. Saya mencoba untuk mendapatkan Tiga kolom di sisi baris div.
 – 
cobolstinks
5 Juli 2016, 17:07
Jadi begitu. Aku sudah mendapat kecurigaan ini. Inilah sebabnya saya memposting komentar di bawah pertanyaan Anda. Anda bisa menggunakan pipa yang membuat larik baru yang mengelompokkan 4 item ke dalam larik sehingga Anda mendapatkan larik larik dan kemudian menggunakan ngFor bersarang
 – 
Günter Zöchbauer
5 Juli 2016, 17:13
Saya memperbarui jawaban saya seperti apa contoh pipa itu.
 – 
Günter Zöchbauer
5 Juli 2016, 19:33
Ini bekerja dengan baik untuk saya. Versi sudut saya tidak mengizinkan "pipa: [ColsPipe]," saya harus memasukkan ColPipes ke dalam deklarasi modul aplikasi saya dan pipa itu dapat diakses di templat saya
 – 
David Lee
10 Januari 2017, 05:50
Terima kasih atas petunjuknya. pipes di @Component() telah dihapus beberapa waktu lalu. Saya memperbarui jawaban saya.
 – 
Günter Zöchbauer
10 Januari 2017, 09:14