将 DIV 中的每 6 个元素与剩余的最后一个元素分组

Question

我有一个包含 n 个项目的数组，我想将每 6 个项目分组到一个单独的 div 中。但假设我在 array 中有 15 个项目。我无法对剩下的最后三个项目进行分组。

我尝试了以下方法，它很好地分组了每 6 个元素。但不是最后剩下的最后 3 项。

<ng-container *ngFor="let item of mockData; let i = index;">
          <div class="inner-wrap" *ngIf="(i+1) % 6 ==0">
            <p *ngIf="mockData[i-5]">{{ mockData[i-5] }}</p>
            <p *ngIf="mockData[i-4]">{{ mockData[i-4] }}</p>
            <p *ngIf="mockData[i-3]">{{ mockData[i-3] }}</p>
            <p *ngIf="mockData[i-2]">{{ mockData[i-2] }}</p>
            <p *ngIf="mockData[i-1]">{{ mockData[i-1] }}</p>
            <p>{{ item  }} </p>
          </div>
</ng-container>

Answer 1

你还应该检查一下你按6分组后是否还有余数。这是一个示例代码

<ng-container *ngFor="let item of mockData; let i = index;">
          <div class="inner-wrap" *ngIf="(( (i+6) < mockData.length) && ((i+1) % 6 ==0)) || (i == mockData.length - (mockData.length % 6))">
            <p *ngIf="mockData[i-5]">{{ mockData[i-5] }}</p>
            <p *ngIf="mockData[i-4]">{{ mockData[i-4] }}</p>
            <p *ngIf="mockData[i-3]">{{ mockData[i-3] }}</p>
            <p *ngIf="mockData[i-2]">{{ mockData[i-2] }}</p>
            <p *ngIf="mockData[i-1]">{{ mockData[i-1] }}</p>
            <p>{{ item  }} </p>
          </div> 
</ng-container>

Answer 2

<ng-container *ngFor="let groupIndex of createGroup(mockData, 6);">
    <div class="inner-wrap">
        <p *ngIf="mockData[(groupIndex*6)]">{{ mockData[(groupIndex*6)] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+1]">{{ mockData[(groupIndex*6)+1] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+2]">{{ mockData[(groupIndex*6)+2] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+3]">{{ mockData[(groupIndex*6)+3] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+4]">{{ mockData[(groupIndex*6)+4] }}</p>
        <p *ngIf="mockData[(groupIndex*6)+5]">{{ mockData[(groupIndex*6)+5] }}</p>
    </div>
</ng-container>

将此方法附加到您的组件：

createGroup(arr, count){
    let grouplist = [];
    let maxNum = (arr.length % count) == 0 ? (arr.length / count) : (arr.length / count)+1;

    for(var i = 0; i < maxNum; i++) {
        grouplist.push(i);
    }
    return grouplist;
}

Answer 3

想法是创建子数组，迭代它们，然后迭代每个子数组以显示为 div 元素

在您的 .ts 文件中，创建如下函数：

  createMockGroup() {
    return (mockData || [])
      .reduce((a, _, i, arr) => {
        if (i % 6 === 0)
          a.push(arr.slice(i, i + 6));
        return a;
      }, []);
  }

在您的 .html 文件中，将内容修改为：

<ng-container *ngFor="let group of createMockGroup()">
    <div class="inner-wrap">
      <ng-container *ngFor="let item of group">
         <p>{{ item }} </p>
      </ng-container>
    </div>
</ng-container>

在此示例中，您根本不需要使用 index

Answer 4

根据您的代码：

<ng-container *ngFor="let item of mockData; let i = index;">
  <div class="inner-wrap" *ngIf="i % 6 ==0">
    <p>{{ item  }} </p>
    <p *ngIf="mockData[i+1]">{{ mockData[i+1] }}</p>
    <p *ngIf="mockData[i+2]">{{ mockData[i+2] }}</p>
    <p *ngIf="mockData[i+3]">{{ mockData[i+3] }}</p>
    <p *ngIf="mockData[i+4]">{{ mockData[i+4] }}</p>
    <p *ngIf="mockData[i+5]">{{ mockData[i+5] }}</p>
  </div>
</ng-container>

Live demo

Answer 5

在你的组件中

@Pipe({
    name: 'filter'
})
@Injectable()
export class FilterPipe implements PipeTransform {
    transform(items: any[]): any[] {
     const R = [];
     for (var i = 0; i < items.length; i += 6) {
      R.push(items.slice(i, i + 6));
     }
     return R
    }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  number = ['', ' ', '', '', '', '', '', '' ]

}

并在 html

<div *ngFor="let item of number | filter ; let i = index" style="border: 1px solid;margin-bottom:20px">
<div *ngFor="let item of item; let j = index" style="">
  element {{i}} , {{j}}
</div>
</div>

stackblitz-https://stackblitz.com/edit/angular-ppnxnm

将 DIV 中的每 6 个元素与剩余的最后一个元素分组

Group every 6 elements in DIV with remaining last elements

typescript

angular

angular6