angular4 HTML模板迭代和ngIf指令

我使用ngFor結構指令像這樣綁定對象的數組到我的HTML模板：angular4 HTML模板迭代和ngIf指令

<div *ngFor=let g of groupsList">

由G引用的每個組都包含一個名爲type屬性。 groupsList中的元素已按類型排序。元素0-10中的含義對象應該具有TypeA，11-35中的元素是TypeB等，但是每種類型的對象和對象的總數是動態的。

我需要將每個對象的類型與之前出現的對象進行比較，並根據這兩個值是否不同來顯示或不顯示上面顯示的不同div。

由於ngFor指令，模板中出現了迭代groupList。因此，我假設我必須在模板中進行比較，而不是在組件中進行比較。

是否正確的方式來創建一對夫婦ng容器和做兩種方式綁定到我的組件中的兩個變量名爲像priorType和currentType？

更新了簡短的解決方案：

<div *ngFor="let g of groupsList; let i=index"> 
<div *ngIf="(i==0) || (i>0 && g.type != groupsList[i-1].type)">

來源

2017-07-13 HendPro12

「將每個對象的類型與之前出現的對象進行比較」，您是指緊接在g [index -1]之前的那個，還是所有在當前對象之前的對象？ – Nehal

@Nehal只是其中之一而已 – HendPro12

這裏的樣本HTML您可以比較的對象與它的前一個對象，並根據比較結果顯示不同div。

<div *ngFor="let g of groupsList; let i = index"> 
    <div *ngIf="i == 0"> 
     {{ g | json }} 
    </div> 
    <div *ngIf="i > 0 "> 
     {{ g | json }} 
     <h4 *ngIf="(groupsList[i].type != groupsList[i-1].type)" style="background: green">Type doesn't match with previous</h4> 
     <h4 *ngIf="(groupsList[i].type == groupsList[i-1].type)" style="background: red">Type matches with previous</h4> 
    </div> 
</div>

demo

希望這有助於！

來源

2017-07-13 16:57:16 Nehal

謝謝。我碰巧找到了自己的解決方案，並且在您回覆您的問題時即將發佈答案。我已經標記爲正確，因爲它代表相同。 – HendPro12

angular4 HTML模板迭代和ngIf指令

回答

相關問題