Angular 2：使用 *ngFor 循环忽略 JSON 对象中的某些值答案

【问题标题】：Angular 2: Ignore certain values in JSON object with *ngFor loopAngular 2：使用 *ngFor 循环忽略 JSON 对象中的某些值
【发布时间】：2016-10-17 22:47:27
【问题描述】：

我有以下 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"}

我正在使用以下代码循环对象：

<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

这有点多余，我想简化一些视图，让它看起来更像这样：

Greens
   Kale
      Red Russian    
      Starbor
   Lettuce
      Alkindus
Fruits
   Strawberry
      Jewel

基本上，我只希望出现VarietyTypeName 的第一个实例和VarietyFamilyName 的第一个实例，而每个VarietyName 都出现。如何调整我的 *ngFor 循环来做到这一点？

【问题讨论】：

标签： angular ngfor

【解决方案1】：

您可以使用 lodash 中的 groupBy。

这是一个类似问题的示例。

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

之后，只需在对象的每个级别上应用 *ngFor 即可。

【讨论】：