3 回答

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

  演示

  回复于 2024-05-02T23:37:23+08:00
• 4

  索引试试这个：

  控制器文件添加功能：

  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标签，因为它将循环遍历每个产品并且div将重复，无论其索引是否为％3 .

  回复于 2024-05-02T23:37:23+08:00
• 44

  谢谢Teddy Sterne的回答 .

  以下是它如何帮助我创建一个连续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

  回复于 2024-05-02T23:37:23+08:00