角 - 運行裏面的功能

在角if語句，我有對象下面的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語句和只顯示奇數和偶數索引項，而不是運行兩次像當前的設置方式我有？

更新：

之所以說它的結構的方式是因爲我顯示在「FIRST_COLUMN」奇數對象和「是second_column」偶數對象。

來源

2017-06-12 steve Kim

你想在視圖（顯示）中做什麼？ –

當然，只需將'data'複製到具有所需順序的新陣列即可。 – Henry

@亨利謝謝你的回覆。我想我可以在功能上有條件。但我不熟悉如何在html中顯示它們的角度語法。示例代碼可能？ –

爲什麼要運行兩次呢？從你的邏輯來看，唯一不同的是ngIf，item-detail組件似乎不在乎它是奇數還是偶數。如果您有基於奇數/偶數顯示的表示方面，請將其放在組件模板中？

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

來源

2017-06-12 06:25:49 rrd

在OPs代碼中首先打印所有奇數，然後打印所有偶數記錄。（無論奇怪甚至真正的意思） – Henry

嗨。我更新了這個問題。我的意思是，我說有10個對象。然後我想顯示所有的奇數號碼（0,1,3 ..）在'second_column'的'first_column'和偶數中（2,4,6 ...）。 –

正如@亨利說，有兩個不同的數組一個奇數和一個偶數，然後分別顯示兩個數組。

<li class="first_column"> 
    <div class="my_item" *ngFor="let item of odditems ; let i = index"> 
    <div> //Odd number 
     <item-detail [item]="item"></item-detail> 
    </div>     
    </div> 
</li> 
<li class="second_column"> 
<div class="my_item" *ngFor="let item of evenitems ; let i = index"> 
    <div> //Even number 
     <item-detail [item]="item"></item-detail> 
    </div>     
</div> 
</li>

而在你的功能有這樣的東西。

item_display(data){ 
this.odditems=[]; 
this.evenitems=[]; 
for(let i=0;i<data.length;i++)   
{ 
    if(i % 2 == 1){ 
     this.odditems.push(data[i]); 
    }else if(i % 2 == 0){ 
     this.evenitems.push(data[i]); 
    } 
}   
};

如果你不想有兩個不同的陣列可以使用ngClass保持*ngFor在<li>項目和基於奇數或偶數的索引更改類。像下面的代碼一樣。

<li *ngFor="let item of items ; let i = index" [ngClass]="{'first_column':i % 2 == 1, 'second_column':i % 2 == 0}"> 
    <div class="my_item" > 
    <div> 
     <item-detail [item]="item"></item-detail> 
    </div>     
    </div> 
</li>

NgClass Reference

，也是我認爲你需要改正你的奇數和偶數決策邏輯:)。

希望這有助於:)

來源

2017-06-12 06:48:15 Manish

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>

我還寫了一個小JS撥弄來解釋它是如何做這個希望回答您的問題 http://jsfiddle.net/bishtneha/63pyqm42/1/

你不需要寫NG-的/循環兩次，這一切都可以完成一次，你可以相應地在ng-repeat中調用你的指令。

來源

2017-06-12 06:59:48

角 - 運行裏面的功能

回答

相關問題