分割數組作爲模板中的網格視圖Angular 2

Question

我有一個圖像數組，我想將它們顯示爲網格10x10（表）。我怎樣才能實現呢？

我已經試過類似的東西，但它是錯誤的語法：

 <ng-container *ngFor="let avatar of avatars; let i = index"> 
      <ng-container *ngIf="i % 10 === 0 && i === 0"> 
       <tr> 
      </ng-container> 
      <ng-container> 
       <td class="text-center"> 
        <img class="img-avatar img-avatar48" [src]="avatar.avatarUri" [alt]="avatar.keywords" /> 
       </td> 
      </ng-container> 
      <ng-container *ngIf="i % 10 === 0"> 
       </tr> 
       <tr> 
      </ng-container> 
     </ng-container> 

Answer 1

你的代碼包含額外tr做這樣的

<ng-container *ngFor="let avatar of avatars; let i = index"> 
    <ng-container *ngIf="i % 10 === 0 && i === 0"> 
     <tr> 
    </ng-container> 
    <ng-container> 
     <td class="text-center"> 
      <img class="img-avatar img-avatar48" [src]="avatar.avatarUri" [alt]="avatar.keywords" /> 
     </td> 
    </ng-container> 
    <ng-container *ngIf="i % 10 === 0"> 
     </tr> 
    </ng-container> 
</ng-container> 

Answer 2

一種解決方案是大塊的數據轉換成數組每行，然後使用嵌套的*ngFor循環遍歷它們。這可以用一個自定義的管道

<table> 
    <tr *ngFor="let row of avatars | chunk: 10)"> 
    <td *ngFor="let avatar of row"> 
     <img class="img-avatar img-avatar48" [src]="avatar.avatarUri" [alt]="avatar.keywords" /> 
    </td> 
    </tr> 
</table> 

的chunk管來實現既可以使用lodash _.chunk或低於本地所示：

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'chunk' 
}) 
export class ChunkPipe implements PipeTransform { 

    transform(value: any, n: number): any { 
     return this.chunk(value, n); 
    } 

    chunk(arr, n) { 
     let newArr = []; 
     let nestedArr = []; 
     for (let i = 1; i <= arr.length; i++) { 
      nestedArr.push(arr[i - 1]); 
      if (i % n === 0) { 
       newArr.push(nestedArr); 
       nestedArr = []; 
      } 
     } 
     if (nestedArr.length > 0) { 
      newArr.push(nestedArr); 
     } 
     return newArr; 
    } 
}