ionic 2 如何使用索引动态加载
Posted
技术标签:
【中文标题】ionic 2 如何使用索引动态加载【英文标题】:ionic 2 how to load dynamically with index 【发布时间】:2017-09-29 20:19:21 【问题描述】:对于 ionic 1,我已经完成了 ng-if="$index % 3 === 0"
的操作,但我需要在网格视图中动态加载数据,一行中有两个列。我怎样才能做到这一点。我试过下面的代码:
在我的 schudle.ts 中:
ResourceData = [ name: "ksjs" , name: "daa" , name: "das" , name: "das" , name: "Computer Science" , name: "Moc" ]
我的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
所以每行两列。请告诉我我做错了什么!
谢谢
离子 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>
【问题讨论】:
【参考方案1】:您在同一个标签中使用了两个 structural directives。*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>
【讨论】:
我试过了,但我的网格视图中没有显示任何数据。它是空的。也没有控制台消息 什么是索引? 兄弟,这就是我在 ionic 1 中应用的内容。在我的控制器中获取硬代码值的第一个索引。动态填充它 ib 网格视图 所以我尝试了同样的使用索引。但它工作正常。我认为获取硬代码值的索引可能是错误的。 兄弟只有两个网格在工作。我在ResourceData
中有 6 个数据。但它只显示前两个。动态地它不显示所有 6 个数据,如 6 个网格以上是关于ionic 2 如何使用索引动态加载的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Flutter/Dart 中使用 Hive 框和索引以简单的方式将数据动态加载到 DataTable?
如何在 ionic2-angular2 中动态切换菜单的一侧?