[Text Updated] Ion-Row ingIf="x%3==0 && x!=0

Ionic Framework ionic-v3
1

Hallo Guys,

could u tell me how i can force a new row after printing 3 fields (x%3==0 new row)

<ion-content padding>
    <ion-grid>
        <ion-row>
            <ion-col>
                <ion-row>
                    <ion-col *ngFor="let field1 of gs.fields; let x = index; trackBy: trackByFn">
                        <!-- new row if x % 3 == 0 -->  
                        <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-col>
        </ion-row>
    </ion-grid>
</ion-content>

MFG

2

i first thought of

<ion-content padding>
    <ion-grid>
        <ion-row>
            <ion-col *ngFor="let field1 of gs.fields; let x = index; trackBy: trackByFn">
                <ion-row *ngIf="x%3==0 && x!=0">
                        <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-row *ngIf="x%3==0 && x!=0">
            </ion-col>
        <!--</ion-row>-->
    </ion-grid>
</ion-content>

x%3 == 0 && x!=0 because i need to start first row tag outside the first ion-col
x%3==0 because i just want a break after 3 times