离子2如何用索引动态加载 [英] ionic 2 how to load dynamically with index

问题描述

对于离子1我已经完成了 ng-if =$ index％3 === 0但我需要在网格视图中动态加载数据col在一排。我怎样才能做到这一点。我尝试下面的代码：

For ionic 1 i have done like ng-if="$index % 3 === 0" But i need to load the data dynamically in grid view with two col in one row. How can i do that. i tried below code :

在我的 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 可能是错误的。请告诉我如何解决这个问题。

But it din work . May be that ngif may be wrong. please tell me how can i solve this.

我需要这样：

as      fa

fas     faaf

faf      faf

fafa     fafaf

每行两个col。请告诉我我做错了什么!!

So two col per row. Please tell me what i am doing wrong !!

谢谢

离子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 和 * ngIf 在一个 div 中。

You are using two structural directives in the same tag.Both *ngFor and *ngIf in one div.

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

There's an easy solution for this use case: put the *ngIf on a container element that wraps the *ngFor element. One or both elements can be an ng-container so you don't have to introduce extra levels of HTML.

使用 ng-container

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

You can also get index by appending 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>

这篇关于离子2如何用索引动态加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！