2イオン：3x3のテーブル内の項目の表示アレイ

Question

私は次のようにディスプレイのような3x3のテーブルに表示したい項目の配列を有する：それを達成するために

を、Iは3の3つの配列の中に私の配列をスライスして、次のように表示される：

<ion-grid no-padding class="home-gallery"> 
    <ion-row *ngFor="let row of items | async"> 
     <ion-col *ngFor="let item of row"> 
      <div class="products_list"> 
       <div class="products_list_img"> 
        <img [src]="item.previewImage" (click)="showItem($event, item)"/> 
       </div>  
      </div> 
     </ion-col> 
    </ion-row> 
</ion-grid> 

は平らに私の配列を維持しながら、この表示を実現する方法はありますか？以下のような結果を表示する

Answer 1

あなただけのグリッドシステムについての詳細を理解する必要があり、3つの配列を必要としません。単一のアレイで

<ion-grid no-padding class="home-gallery"> 
    <ion-row> 
     <ion-col col-4 *ngFor="let item of items | async"> <!-- JUST ADD A col-4 attribute --> 
      <div class="products_list"> 
       <div class="products_list_img"> 
        <img [src]="item.previewImage" (click)="showItem($event, item)"/> 
       </div>  
      </div> 
     </ion-col> 
    </ion-row> 
</ion-grid> 

のでcol-4はこのことをあなたのグリッドに指定しますんので、12列を渡すために起こっているので、もし それがダウンアイテムをプッシュし、12列の行だと別の行を「作成します」タグは、すべての画面サイズで12の4つの列を使用します。

希望します。

Answer 2

使用Flexbox：

.home-gallery { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
} 

とは、一つだけ*ngForがあなたの単一の配列を取得するために使用します。テンプレートが読み複雑すぎると硬くなるので

Answer 3

通常、テンプレートでこれを行うことは、悪い考えです：

<ion-grid no-padding class="home-gallery"> 
    <ion-row *ngFor="let rowN of [0,1,2]"> 
     <ng-container *ngFor="let colN of [0,1,2]"> 
     <ion-col *ngFor="let item of (flatList | async).slice(rowN*3+colN, rowN*3+colN+1)"> 
      <div class="products_list"> 
       <div class="products_list_img"> 
        <img [src]="item.previewImage" (click)="showItem($event, item)"/> 
       </div> 
      </div> 
     </ion-col> 
     </ng-container> 
    </ion-row> 
</ion-grid>