根据 *ngFor / *ngIf 中的值添加标题答案

【问题标题】：Adding a title based on a value in an *ngFor / *ngIf根据 *ngFor / *ngIf 中的值添加标题
【发布时间】：2021-03-18 14:04:48
【问题描述】：

找不到我的问题的解决方案，我在这里问我的问题。

我正在从我的数据库中检索对象列表。每个水果都包含以下值：ID、名称、图像、代码和颜色。

我想为每种水果颜色显示一个标题。

在我的示例中，我得到 2 个红色水果和 1 个蓝色水果。所以我想得到一个标题“RED”，下面有 2 个红色水果，标题“BLUE”，下面有蓝色水果。

What I'm looking for

这就是我设法做到的：

  <div class="col-md-10 offset-md-1 row d-flex justify-content-center after-loop">
    <div *ngFor="let fruit of fruits$;">
      <div *ngIf="fruit.color == 'red'">
        <h3 style="color:#fff"><span style="color:#ea4848">COLOR</span> - Red</h3>
        <div *ngIf="active">
          <app-fruit [name]="fruit.name" [image]="fruit.image" [code]="fruit.code"
            [color]="fruit.color"></app-fruit>
        </div>
      </div>
    </div>
  </div>

My result

如果水果是红色的，它会在水果卡片上方打印一个标题。我更多的是寻找一个“全球”的标题。

感谢您的帮助。

【问题讨论】：

标签： angular

【解决方案1】：

我建议先根据颜色将您的数组与reduce 分组，然后在您的颜色数组上获取实例，以便我们能够在分组的水果中循环

已创建 Stackblitz Demo 供您参考

组件

// Group the fruits by their colors
this.groupedFruits = this.fruits
   .reduce((box, fruit) => {
      box[fruit.color] = box[fruit.color] ?  [ ...box[fruit.color], fruit ] : [ fruit ];
      return box;
}, {});

// Grab all the color keys inside your groupedFruits array
this.colors = Object.keys(this.groupedFruits);

您的groupedFruits 的数据在分组后将如下所示：

{ 
  red: [{ name: 'apple' }, { name: 'strawberry'}],
  yellow: [{ name: 'mango' }],
  ...and so on
}

模板

<ul *ngFor="let color of colors">
   // Color Name with count of how many fruits under that color
   <h4 class="ml-0">
      {{ color }} 
      <span class="badge badge-secondary">{{ groupedFruits[color].length }}</span>
   </h4>

   // loop the fruits according to their color
   <li *ngFor="let fruit of groupedFruits[color]">{{ fruit.name }}</li>
</ul>

【讨论】：

【解决方案2】：

您首先必须在源数据中对它们进行分类：

这是一些自定义代码，因为我看不到您的实际数据检索实现：

如果你的组件代码中有这样的东西：

readonly fruits$: Observable<Fruit[]> = this.getFruits().pipe(
  shareReplay({ refCount: true, bufferSize: 1 })
);

readonly fruitCats$: Observable<{color: string, fruits: Fruit[]}[]> = this.fruits$.pipe(
  map((fruits) => fruits.reduce((cats, fruit) => {
    const cat = cats.find(({ color }) => fruit.color === color);

    cat ? cat.fruits.push(fruit) : cats.push({ color: fruit.color, fruits: [ fruit ] });

    return cats;
  }, []),
  shareReplay({ refCount: true, bufferSize: 1 })
);

然后您可以在模板中执行以下操作：

<div class="col-md-10 offset-md-1 row d-flex justify-content-center after-loop">
  <div *ngFor="let fruitCat of fruitCats$ | async">
    <div *ngIf="fruitCat.color == 'red'">
      <h3 style="color:#fff"><span style="color:#ea4848">COLOR</span> - Red</h3>
    </div>

    <div *ngFor="let fruit of fruitCat.fruits">
      <app-fruit [name]="fruit.name" [image]="fruit.image"
                [code]="fruit.code" [color]="fruit.color"></app-fruit>
    </div>
  </div>
</div>

另一种选择是编写一个自定义管道，按特定属性对数组进行分类，但我会让你自己弄清楚

【讨论】：