如何使用 ngFor 连续迭代两个元素 [英] How to iterate two elements in a row with ngFor

问题描述

我有一个字符串数组，我想用 ngFor 将它们中的每两个排成一行.这是我尝试过的:

<md-card><md-card-header><md-card-title>{{指数}}</md-card-title></md-card-header></md-card>
<div class='col-md-6' *ngIf='i+1 <myArray.length'><md-card><md-card-header><md-card-title>{{myArray[i+1}}</md-card-title></md-card-header></md-card>

但是当我添加一个新元素时，它会复制以前的元素，我真的不明白原因.如何使用 ngFor 在每行中添加两个元素?

解决方案

你可以通过为 *ngIf 查找偶数(0，第一个索引是偶数)来跳过所有其他索引，并很快显示下一个项目被跳过(奇数)项目:

<div class='row wow fadeInUp' *ngFor='let index of myArray;让我 = 指数;让 even = even'><span *ngIf="even"><div class='col-md-6' ><md-card><md-card-header><md-card-title>{{myArray[i]}}</md-card-title></md-card-header></md-card>

<md-card><md-card-header><md-card-title>{{myArray[i+1]}}</md-card-title></md-card-header></md-card>

</span>

演示示例

I have array of strings and I want to place every two of them in a row with ngFor. Here is what I tried:

<div class='row wow fadeInUp' *ngFor='let index of myArray;let i = index;'>
     <div class='col-md-6'>
         <md-card>
            <md-card-header>
               <md-card-title>
                 {{index}}
               </md-card-title>
             </md-card-header>
          </md-card>
     </div>
     <div class='col-md-6' *ngIf='i+1 < myArray.length'>
         <md-card>
            <md-card-header>
               <md-card-title>
                 {{myArray[i+1}}
               </md-card-title>
             </md-card-header>
          </md-card>
    </div>
</div>

But when I add a new element, it duplicates the previous element and I really don't underestand the reason. How can I add two elements in each row with ngFor?

解决方案

You can skip every other index just by looking for even numbers (0, the first index is even) for *ngIf, and display that items with the next soon be skipped (odd) item:

<div class='row wow fadeInUp' *ngFor='let index of myArray; let i = index; let even = even'>
      <span *ngIf="even">
         <div class='col-md-6' >
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
         </div>
         <div class='col-md-6'>
             <md-card>
                <md-card-header>
                   <md-card-title>
                     {{myArray[i+1]}}
                   </md-card-title>
                 </md-card-header>
              </md-card>
        </div>
       </span>
    </div>

DEMO EXAMPLE

这篇关于如何使用 ngFor 连续迭代两个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！