Demo

Question

我有这段代码：

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

Answer 1

Angular不提供开箱即用的此功能。我认为实现所需结果的最简单方法是仅在每个第三个索引上显示数据，如下所示：

<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll1.gif"
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
(<?php echo $yes;  ?> Vote) </td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll2.gif"
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
  : (<?php echo $no;  ?> Vote)   </td>
</tr>
<tr> <?php echo $yes+$no; ?> total responses. </tr>
</table>

Demo

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

Answer 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

使用Angular2 ngFor索引

3 个答案:

Demo