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

时间:2017-05-02 10:30:45

标签: angular ionic2

对于离子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

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

由于

离子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 个答案:

答案 0 :(得分:3)

您在同一个代码中使用了两个structural directives<form action="attendinsert.php" method="post"> <table id="attendance" width="567" border="1 bold"> <tr> <th width="83" scope="col">ID</th> <th width="83" scope="col">Student Name</th> <th width="55" scope="col">Student Roll.No</th> <th width="51" scope="col">Attendance</th> </tr> <?php while (list($id, $name, $mobileno) = $report->fetch_row()) { ?> <tr> <td><?php echo $id ?></td> <td><?php echo $name ?></td> <td><?php echo $mobileno ?></td> <td align="center"> <?php echo '<input type="checkbox" name="att[]" value="P" />'; ?> </td> <input type="hidden" name="mobileno1[]" value="<?php echo $mobileno; ?>"/> </tr> <?php } echo '</table>'; ?> <input type="submit" name="submit2" id="submit2" value="submit"> </input> </form> 中只有*ngFor*ngIf

  

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

使用ng-container

您还可以在div附加let i =index来获取索引。

*ngFor