如何使用ngFor连续迭代两个元素 [英] How to iterate two elements in a row with ngFor
本文介绍了如何使用ngFor连续迭代两个元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个字符串数组,我想用ngFor将它们中的每两个都放在一行中.这是我尝试过的:
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>
但是,当我添加一个新元素时,它会复制前一个元素,我确实不理解原因.如何使用ngFor在每行中添加两个元素?
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?
推荐答案
您可以跳过所有其他索引,只需查找* ngIf的偶数(0,第一个索引为偶数),然后在下一个显示该项目被跳过(奇数)项:
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>
这篇关于如何使用ngFor连续迭代两个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文