Question

我一直在尝试Ionic 2以及角度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？有人可以帮忙解决这个问题吗？可以在网上找到任何例子。非常感谢，大卫。

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>

你可以注意到“template”（扩展语法）的使用，因为ngIf和ngFor可以用在同一个元素上。

有关模板语法的详细信息，请参阅此文档：

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

请注意，对于Angular2的最后一个版本，“＃”只需在ngFor表达式中通过“let”进行替换。

Angular2等效ng-repeat与ng-if？

1 个答案: