Question

我有一系列字符串，我希望将每两个字符串放在一起使用ng。这是我尝试过的：

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

但是当我添加新元素时，它复制了pervios元素，我真的不感兴趣，所以如何在每行中添加两个元素和ngFor

Answer 1

您可以通过查找* ngIf的偶数（0，第一个索引是偶数）来跳过所有其他索引，并显示下一个很快被跳过（奇数）项目的项目：

<div id="a" class="box"></div>

DEMO EXAMPLE

Answer 2

ngFor公开odd和even，可以有条件地（使用ngIf）显示一些项目。

<ul>
  <li *ngFor="let item of array; let even = even">
    <ng-container *ngIf="even">{{ item }}</ng-container>
  </li>
</ul>

也就是说，在您的代码中而不是在模板中执行此操作可能会更好。它更清晰，可测试且性能更强。

evenItems = array.filter((_, index) => index % 2 == 0)

然后绕过那些。

<ul>
  <li *ngFor="let item of eventItems">
    {{ item }}
  </li>
</ul>

迭代行中的两个元素ngFor angular

2 个答案: