我有一个字符串数组,我想用 ngFor 将它们中的每两个放在一行中。这是我尝试过的:
<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 在每一行中添加两个元素?
最佳答案
您可以通过为 *ngIf 查找偶数(0,第一个索引是偶数)来跳过所有其他索引,并显示下一个即将被跳过(奇数)的项目:
<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>
关于angular - 如何使用 ngFor 连续迭代两个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47114498/