angularjs – 离子2新行如果索引％3 == 0

发布时间：2020-12-17 16:59:49 所属栏目：安全来源：网络整理

导读：我有一个离子网格,里面有3个foreach循环最外层的循环看起来像这样： 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-- /i

我有一个离子网格,里面有3个foreach循环
最外层的循环看起来像这样：

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

但我想每次x％3 == 0时得到一个新行[如果我保持第一个在循环之外我需要x％3 == 0&& x！= 0]
我希望保持循环内的所有内容相同而不是复制代码
底部的屏幕

我的第一个想法是做一些像：

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

x在0到8的范围内运行,因此< / ion-row * ngIf =“x％3 == 0&& x！= 0”>因为关闭标签应该没问题,因为我关闭了外部foreach循环外面的离子行.但这不是装载.
怎么样：

How it is

我希望它如何：

How i want it to be

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

解决方法

ngIf适用于整个元素,不仅适用于开放或关闭标记.
你可以这样做：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!