离子 2 如何使用索引动态加载

Question

对于离子 1，我已经做了ng-if="$index % 3 === 0"但是我需要在网格视图中动态加载数据，一行中有两个列。我该怎么做。我尝试了以下代码：

在我的书中：

ResourceData = [{ name: "ksjs" },{ name: "daa" },{ name: "das" }, {name: "das" }, {name: "Computer Science" }, { name: "Moc" }]

我的网页 ：

<div class="item item-body no-padding" style="border-width: 0px !important; overflow-y:hidden;height: 65%;">
<div class="row no-padding" style="height: 65%;" *ngFor="let data of ResourceData" *ngIf="index % 2 == 0">
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{data[index].name}}</span></div>
</div>
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{data[index + 1].name}}</span></div>
</div>
</div>
</div

但它有效.也许ngif可能是错的。请告诉我如何解决这个问题。

我需要这样：

as      fa
fas     faaf
faf      faf
fafa     fafaf

所以每行两个列。请告诉我我做错了什么！！

谢谢

离子 1

<div class="row no-padding" ng-repeat="mydash in Data"  ng-if="$index % 3 === 0">
<div class="col col-30 custom-design2" style="background: url({{Data[$index].Image}}) no-repeat center;background-size: cover;" ng-click="changestate(Data[$index])" ng-if="$index < Data.length">
<div class="custom-design1"><span class="grid-title">{{Data[$index].name}}</span></div>
</div>
<div class="col col-30 custom-design2" style="background: url({{Data[$index + 1].Image}}) no-repeat center;background-size: cover; " ng-click="changestate(Data[$index + 1])" ng-if="$index + 1 < Data.length">
<div class="custom-design1"><span class="grid-title">{{Data[$index + 1].name}}</span></div>
</div>
<div class="col col-30 custom-design2" style="background: url({{Data[$index + 2].Image}}) no-repeat center;background-size: cover; " ng-click="changestate(Data[$index + 2])" ng-if="$index + 2 < Data.length">
<div class="custom-design1"><span class="grid-title">{{Data[$index + 2].name}}</span></div>
</div>
</div> 

Answer 1

您在同一标记中使用了两个结构指令。*ngFor和*ngIf合二为一div.

对于此用例，有一个简单的解决方案：将 *ngIf 放在包装 *ngFor 元素的容器元素上。一个或两个元素可以是 ng 容器，因此您不必引入额外的 HTML 级别。

使用 ng-container

您还可以通过在*ngFor中附加let i =index来获取索引。

<div class="row no-padding" style="height: 65%;" *ngFor="let data of ResourceData;let i = index">
<ng-container *ngIf=" i % 2 == 0">
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceData[i].name}}</span></div>
</div>
<div class="col col-50 custom-design2" style="background: url(url) no-repeat center;background-size: cover;">
<div class="custom-design1"><span class="grid-title">{{ResourceData[i+1].name}}</span></div>
</div>
</ng-container>
</div>