对于 ionic 1 我已经这样做了ng-if="$index % 3 === 0"
但我需要在网格视图中动态加载数据,其中一行有两个列。我怎样才能做到这一点。我尝试了下面的代码:
in my schudle.ts:
ResourceData = [{ name: "ksjs" },{ name: "daa" },{ name: "das" }, {name: "das" }, {name: "Computer Science" }, { name: "Moc" }]
My html :
<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
所以每行两列。请告诉我我做错了什么!!
Thanks
ionic 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>
您正在使用两个结构指令在同一个标签中。两者*ngFor
and *ngIf
in one div
.
对于此用例,有一个简单的解决方案:将 *ngIf 放在包装 *ngFor 元素的容器元素上。一个或两个元素可以是 ng-container,因此您不必引入额外的 HTML 级别。
Use ng-容器
您还可以通过附加来获取索引let i =index
in *ngFor
.
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)