2角度：私は次のJSONオブジェクトを持つ* ngForループ

Question

とJSONオブジェクト内の特定の値を無視：

{VarietyTypeName:"Greens", VarietyFamilyName:"Kale", VarietyName:"Red Russian"}, 
{VarietyTypeName:"Greens", VarietyFamilyName:"Kale", VarietyName:"Starbor"}, 
{VarietyTypeName:"Greens", VarietyFamilyName:"Lettuce", VarietyName:"Alkindus"}, 
{VarietyTypeName:"Fruits", VarietyFamilyName:"Strawberry", VarietyName:"Jewel"} 

をIオブジェクトをループするために、次のコードを使用しています：

<div *ngFor="let variety of varieties"> 
    <div class="varietyTypeName menu-item-type-header"> 
     {{variety.VarietyTypeName}} 
     <i class="fa fa-angle-down arrow-toggle"></i> 
    </div> 
    <div class="menu-item-group"> 
     <div class="varietyFamilyName">{{variety.VarietyFamilyName}}</div> 
     <div class="varietyName"> 
      <a>{{variety.VarietyName}}</a>     
     </div> 
    </div> 
</div> 

これは、ビューでこれを見るようになります：

Greens 
    Kale 
     Red Russian 
Greens 
    Kale 
     Starbor 
Greens 
    Lettuce 
     Alkindus 
Fruits 
    Strawberry 
     Jewel 

これは少し冗長であり、私は単純化したいと思いますそれは代わりに、より次のようになりますので、eは、いくつかを表示します。

Greens 
    Kale 
     Red Russian  
     Starbor 
    Lettuce 
     Alkindus 
Fruits 
    Strawberry 
     Jewel 

基本的に私は、各VarietyName表示されながら表示されるVarietyFamilyNameのVarietyTypeNameと最初のインスタンスの最初のインスタンスのみが欲しいです。これを行うにはどうすれば*ngForループを調整できますか？

Answer 1

ロダッシュのgroupByを使用できます。

これは、同様の質問の例です。その後

using lodash .groupBy. how to add your own keys for grouped output?

、それはオブジェクトの各レベルで* ngForを適用するだけです。