使用 ngFor 将两个元素添加到一行然后创建一个新行答案

【问题标题】：Using ngFor add two elements to a row then create a new row使用 ngFor 将两个元素添加到一行然后创建一个新行
【发布时间】：2018-11-26 00:40:52
【问题描述】：

所以我一直在尝试使用 *ngFor 迭代一个对象数组，其中两个元素被放置在一行内。每 2 个组件添加到一行后，应生成一个新行，依此类推。

到目前为止我在下面尝试了什么：

<div class="row" *ngFor="let prod of products; let i = index; let even = even">
<span *ngIf="even">
    <div class="col-md-6 offset-3">
        <div>
            <img src="{{ prod.imagePath }}" alt="{{ prod.name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
        </div>
        <div>
            <h2>{{ prod.name }}</h2>
        </div>
        <div>
            <h3>Price: {{ prod.price }}</h3>
        </div>
    </div>
    <div class="col-md-6 offset-3">
        <div>
            <img src="{{ products[i+1].imagePath }}" alt="{{ products[i+1].name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
        </div>
        <div>
            <h2>{{ products[i+1].name }}</h2>
        </div>
        <div>
            <h3>Price: {{ products[i+1].price }}</h3>
        </div>
    </div>
</span>

我已经检查了我可以在这里找到的所有相关问题，但似乎没有一个可以解决我的问题。

此时，无论我做什么，每个元素都会进入它自己的行。

我尝试为每个元素更改容器的大小，但无济于事。

提前感谢您的帮助！

【问题讨论】：

为什么不把ngIf 放在带有col 类的内部div 上？ ps DIV 标签在 SPAN 标签内无效。
@DaleBurrell。感谢您的回复，我不知道 div 在跨度内无效，很高兴知道！无论如何，我在等待时已将跨度更改为，这解决了 50% 的问题。现在我只需要尝试让它们以某种方式居中。谢谢！
您还可以构建一个新的 products 数组，该数组将在每个索引处组合两个元素：例如：let products = [[{product1}{product2}], [{product3},{product4}]] 并循环它们以进行打印。

标签： angular ngfor

【解决方案1】：

执行此操作的最佳方法是转换 products 数组的结构，使其成为数组数组。然后你想要的结构很容易循环和打印。

您可以使用pipe 进行转换。例如：

     @Pipe({
       name: 'updateRows'
     })
     export class UpdateRowsPipe implements PipeTransform {

      transform<T>(value: T[], perRow: number): T[][] {
          let rows: T[][] = [];
          for (let i = 0; i < value.length; i += perRow) {
            rows.push(value.slice(i, i + perRow))
        }
        return rows;
    }

  }

然后在你有*ngFor的地方使用它：

    <div class="row" *ngFor="let row of products | updateRows:2">
        <div *ngFor="let product of row">
            <div class="col-md-6 offset-3">
                 <div>
                <img src="{{ product.imagePath }}" alt="{{ product.name }}" class="img-responsive" style="max-height: 150px; max-width: 150px;">
            </div>
            <div>
                <h2>{{ product.name }}</h2>
            </div>
            <div>
                <h3>Price: {{ product.price }}</h3>
            </div>
        </div>
          <!-- Do some more fun things here --> 
     </div>   

</div>

【讨论】：