Ionic 2 new Row if Index% 3 == 0

Question

ive got an ionic grid with 3 foreach loops inside eachother, the outermost loop would look like this:

<ion-content padding>
    <ion-grid>
        <ion-row>
            <ion-col>
                <ion-row>
                    <ion-col *ngFor="let field1 of gs.fields; let x = index; trackBy: trackByFn">
                        <!-- More Foreach Loops inside each other-->  
                    </ion-col>
                </ion-row>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

Run codeHide result

but I want to get a new line every time x% 3 == 0 [and if I hold the first outside the loop, I need x% 3 == 0 && & x! = 0] I would like to keep everything inside the loop the same, rather than copy the code
screens at the bottom

My first thought was to do something like:

<ion-content padding>
    <ion-grid>
        <ion-row>
            <ion-col>
                <ion-row>
                    <ion-col *ngFor="let field1 of gs.fields; let x = index; trackBy: trackByFn">
                        <ion-row *ngIf="x%3==0 && x!=0">
                            <!-- More Foreach Loops inside each other-->  
                        </ion-row *ngIf="x%3==0 && x!=0">
                    </ion-col>
                </ion-row>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

Run codeHide result

x works in the range from 0 to 8, so it </ion-row *ngIf="x%3==0 && x!=0">should be accurate as a closing tag, because I close the ion row outside the outeach foreach loop. But this is not a download.

Like this: How I want:

<ion-content padding>
    <ion-grid>
        <ion-row>
            <ion-col *ngFor="let field1 of gs.fields; let x = index; trackBy: trackByFn">
                <div *ngIf="gs.won_fields[x] == false" [ngClass]="{'bordern':x%2==0,'bordernplus1':x%2!=0}">
                    <ion-col *ngFor="let field2 of field1; let y = index; trackBy: trackByFn">
                        <ion-row>
                            <ion-col class="ctr fc tile" *ngFor="let tile of field2; let z = index; trackBy: trackByFn" (click)="playerClick(x,y,z)">
                                <span class="ctr" [ngClass]="{'player1': tile==1, 'player2' : tile==2}">{{(tile==0)? ' ': ((tile==1)? 'x' : 'o')}}</span>
                            </ion-col>
                        </ion-row>
                    </ion-col>
                </div>
                <!-- Wenn Feld gewonnen x oder o eintragen  -->
                <span class="ctr tile" *ngIf="gs.won_fields[x] != false" [ngClass]="{'bordern':x%2==0,'bordernplus1':x%2!=0}" [ngClass]="{'player1': gs.won_fields[x]===1, 'player2' : gs.won_fields[x]===2}">{{(gs.won_fields[x]==1)? 'x' : 'o'}}</span>
            </ion-col>
        </ion-row>
    </ion-grid>
</ion-content>

Run codeHide result

Answer 1

ngIf , open close. :

<ion-grid>
    <ion-row>
        <ion-col *ngFor="let item of items; let i = index">
            <ion-row *ngIf="i%3 == 0">
                {{item}}
            </ion-row>
            <div *ngIf="i%3 != 0">
                {{item}}
            </div>
        </ion-col>
    </ion-row>
</ion-grid>