web-dev-qa-db-ja.com

ngForを使用して行の2つの要素を反復する方法

私は文字列の配列を持っているので、ngForを使用してそれらを2行ごとに並べたいと思います。ここに私が試したものがあります：

<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を使用して各行に2つの要素を追加するにはどうすればよいですか？

angularangular-materialiterationangular-material2
8
Daniel.V

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

デモの例

11
Vega

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>
1
Lazar Ljubenović