離子2新行，如果索引％3 == 0

香港專業教育學院得到了與3 foreach循環的離子型格海誓山盟裏面最外環是這樣的：離子2新行，如果索引％3 == 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"> 
 
         <!-- 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">爲關閉標籤應該沒問題，因爲我關閉了outter foreach循環外的離子行。但是這不是加載。

它是如何：
如何我希望它是：

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

來源

2017-07-05 Vor Name

你能展示'gs.fields'的結構嗎？ –

@GabrielBarreto https://pastebin.com/raw/Rf2B5zNX添加了整個.html文件以及 –

請檢查我的答案 – Duannx

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>

來源

2017-07-06 03:21:47 Duannx

離子2新行，如果索引％3 == 0

回答

相關問題