Question

在角度方面，我有以下对象的html：

<li class="first_column">
  <div class="my_item" *ngFor="let item of items ; let i = index">
     <div *ngIf="i % 2 == 0"> //Odd number
         <item-detail [item]="item"></item-detail>
     </div>                  
  </div>
</li>
<li class="second_column">
 <div class="my_item" *ngFor="let item of items ; let i = index">
     <div *ngIf="i % 2 == 1"> //Even number
         <item-detail [item]="item"></item-detail>
     </div>                  
 </div>
</li>

这很好用，但我觉得这样效率很低，因为它已经运行了两次才能显示它们。

该功能如下：

item_display(data){         
    this.items = data;          
};

有没有办法直接在item_display函数内部运行if语句，只显示奇数和偶数索引项而不是像我当前的设置那样运行两次？

更新：

它的结构方式是因为我在＆＃34; first_column＆＃34;中显示了奇数对象。甚至在＆＃34; second_column＆＃34;中编号对象。

Answer 1

为什么要运行两次？从你的逻辑来看，唯一不同的是ngIf，item-detail组件似乎并不关心它是奇数还是偶数。如果您有基于奇数/偶数显示的表示方面，请将其放在组件模板中吗？

<div class="my_item" *ngFor="let item of items ; let i = index">
  <item-detail [item]="item"></item-detail>
</div>

Answer 2

hey as you provided description for your question you can save on computation using logic like this

    <div ng-repeat="item in items">
      <div class="col-xs-6">
        <div ng-show="item % 2 == 0">{{item}}</div>
      </div>
      <div class="col-xs-6">
        <div ng-show="item % 2 == 1">{{item}}</div>
      </div>
    </div>

我还写了一个小小的小提琴来解释它是如何完成的，希望这能回答你的问题 http://jsfiddle.net/bishtneha/63pyqm42/1/

你不需要写两次ng-for / looping就可以完成一次，你可以相应地在ng-repeat中调用你的指令。

Angular - 在函数内部运行if语句

2 个答案: