ng-repeatとng-ifのAngular2に相当するのは？

Question

私は、アングル2とそのグリッドレイアウトシステムと共にIonic 2を試しています。私はアイテムの配列をループすることができるようにしたいと思いますが、それが反応しやすいようにするために、必要に応じて折り畳むことができるように、すべてのXアイテムを列と行などに配置する必要があります。元の角度では、それは次のように動作します：

<div class="row" ng-repeat="photo in photos" ng-if="$index % 4 === 0"> 
<div class="row"> 
    <div class="col col-50" ng-if="$index < photos.length"> 
     <!-- Content --> 
    </div> 

    <div class="col col-50" ng-if="$index + 1 < photos.length"> 
     <!-- Content --> 
    </div> 
</div> 

<div class="row"> 
    <div class="col col-50" ng-if="$index + 2 < photos.length"> 
     <!-- Content --> 
    </div> 

    <div class="col col-50" ng-if="$index + 3 < photos.length"> 
     <!-- Content --> 
    </div> 
</div> 

しかし、私はangular2に* ngForと* ngIfを使用するかどうかはわかりませんか？これを乗り越えるのに助けてもらえますか？ Web上のサンプルを見つけることはできません。多くのありがとう、デイビッド。

Answer 1

あなたは彼らにこの方法を使用することができます。

<div class="row" *ngFor="#photo of photos;#i=index"> 
<template [ngIf]="i % 4 === 0"> 
    <div class="row"> 
     <div class="col col-50" *ngIf="i < photos.length"> 
      <!-- Content --> 
    </div> 

    <div class="col col-50" *ngIf="i + 1 < photos.length"> 
     <!-- Content --> 
    </div> 
    </div> 

    <div class="row"> 
    <div class="col col-50" *ngIf="i + 2 < photos.length"> 
     <!-- Content --> 
    </div> 

    <div class="col col-50" ngIf="i + 3 < photos.length"> 
     <!-- Content --> 
    </div> 
</template> 
</div> 

ngIfとngForは同じ要素で使用することができますので、あなたは、「テンプレート」（拡張構文）を使用することを気づくことができます。

テンプレートの構文の詳細については、このドキュメントを参照してください：Angular2、「＃」の非常に最後のバージョンとばかりに「せ」で代用することが

• https://angular.io/docs/ts/latest/guide/template-syntax.html

注意ngFor表現する。