使用 Angular2 ngFor 索引

Posted 2023-02-22

【中文标题】使用 Angular2 ngFor 索引

【英文标题】：Using Angular2 ngFor index

【发布时间】：2017-08-22 22:58:36

【问题描述】：

我有这个代码：

<div class="row list-group">
  <div *ngFor="let product of products" >
    <app-product [product]="product"></app-product>
  </div>
</div>

我想知道有什么方法可以从存储桶中的数组中获取产品吗？像这样的：

<div class="list-group">
  <div *ngFor="products; index+3" >
    <div class="row">
      <app-product [product]="products[index]"></app-product>
      <app-product [product]="products[index+1]"></app-product>
      <app-product [product]="products[index+2]"></app-product>
    </div>
  </div>
</div>

这样我就可以连续拥有我需要的所有元素

UPD

感谢 Teddy Sterne，我最终得到了这个解决方案：

<div class="list-group">
  <div *ngFor="let product of products;let i = index">
    <div class="row" *ngIf="i%3===0">
      <app-product [product]="products[i]"></app-product>
      <div *ngIf="products[i + 1]">
        <app-product [product]="products[i + 1]"></app-product>
      </div>
      <div *ngIf="products[i + 2]">
        <app-product [product]="products[i + 2]"></app-product>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

对于任何试图在网格中显示可变数量对象的人，您可能需要查看 mat-grid：material.angular.io/components/grid-list/overview。 （如果网站无法加载，请在新的隐身窗口中尝试。）

【参考方案1】：

Angular 没有开箱即用地提供此功能。我认为达​​到预期结果的最简单方法是仅在每三个索引上显示数据，如下所示：

<div class="list-group">
  <div *ngFor="let p of products; let idx = index" >
    <div class="row" *ngIf="idx % 3 === 0">
      <app-product [product]="products[idx]"></app-product>
      <app-product [product]="products[idx+1]"></app-product>
      <app-product [product]="products[idx+2]"></app-product>
    </div>
  </div>
</div>

Demo

【讨论】：

猜你需要对index+1 和index+2 元素进行边界检查。除此之外，它应该可以工作:)

如果指令可以处理undefined 应该没问题。否则是的，你可以在每一行添加一个*ngIf 来防止它。

@TeddySterne 仅供参考，演示链接无效。

【参考方案2】：

对于索引试试这个：

控制器文件添加功能：

chunks(array, size) 
  let results = [];
  while (array.length) 
    results.push(array.splice(0, size));
  
  return results;
;

在你查看文件中：

<div *ngFor="let chunkProduct of chunks(products,3);" >
  <div class="row">
      <app-product *ngFor="let product of chunkProduct" [product]="product"></app-product>
  </div>
</div>

这适用于所有数字，而不仅仅是 %3 个数字。

@Teddy Sterne 的解决方案将在数字为 %3 的情况下有效 如果我们有 8 个产品，它将仅显示 6 个，最后 2 个将丢失，在此也会显示。

如果您检查元素并检查，它将为非 %3 索引创建额外的空白 div 标签，因为它将循环遍历每个产品，并且无论其索引是否为 %3，div 都会重复。

【讨论】：

那会爆炸——也就是给出索引超出范围的错误。

@VivekDoshi 假设 products 长度为 6。当 index 为 5 时，最后一条语句会发生什么？

它坏了。如果长度为 2，它将尝试访问索引 1*3==3，这显然超出了范围。

【参考方案3】：

感谢泰迪·斯特恩的回答。

以下是它如何帮助我创建一个连续包含 7 个单元格的日历控件

<div class="container-fluid">
  <table class="table table-bordered">
    <ng-container *ngFor="let d of data; let i = index" >
      <tr *ngIf="i % 7 === 0">
        <td *ngFor="let x of [i,i+1,i+2,i+3,i+4,i+5,i+6]">
          data[x]
        </td>
      </tr>
    </ng-container>
  </table>      
</div> 

DEMO

https://stackblitz.com/edit/angular-1nhor2?embed=1&file=src/app/app.component.html