在 angular 中嵌套 for 循环的 mat-selection-list

Question

我在 API 中得到的数据集如下：

产品名称	类别	评分
苹果手机	手机	3
苹果手机	苹果	3
摩托罗拉	手机	4

我想如何显示这就像产品名称为 header 然后产品所属的类别然后审查：

每个产品应该只有一个条目，并且该条目下的所有类别都应该用逗号分隔。

我正在使用mat-selection-list ，我的代码如下所示：

 <div class="products-box"> <mat-selection-list #products color="primary"> <mat-list-option class="p-1 m-1" checkboxPosition="before" *ngFor="let product of products" > <div class="row"> <div class="col"> {{ product.name }} </div> <div class="col-auto"> {{ product.rating }} </div> </div> <div class="row"> <div class="col-md-12 text-muted">{{ product.category }}</div> </div> </mat-list-option> </mat-selection-list> </div>

我应该如何编写嵌套 for 循环，以便为每个产品获取逗号分隔的类别？

Answer 1

我在这里创建了一个最小的工作示例，它使用 Lodash 的groupBy function 按productName对产品列表进行分组。 这种方法的好处是只需要在第一次加载页面时执行一次分组逻辑。

楷模

export interface ProductCategoryRanking {
  productName: string;
  category: string;
  rating: number;
}

服务

import { Injectable } from "@angular/core";
import { ProductCategoryRanking } from "./product-category-ranking";

@Injectable({
  providedIn: "root"
})
export class ProductCategoryRankingService {
  get(): ProductCategoryRanking[] {
    return [
      {
        productName: "iPhone",
        category: "Smart Phone",
        rating: 3
      },
      {
        productName: "iPhone",
        category: "Apple",
        rating: 3
      },
      {
        productName: "Motorola",
        category: "Smart Phone",
        rating: 4
      }
    ];
  }
}

成分

import { Component, OnInit } from "@angular/core";
import _ from "lodash";
import { ProductCategoryRanking } from "./product-category-ranking";
import { ProductCategoryRankingService } from "./product-category-ranking.service";

/**
 * @title List with selection
 */
@Component({
  selector: "list-selection-example",
  styleUrls: ["list-selection-example.css"],
  templateUrl: "list-selection-example.html"
})
export class ListSelectionExample implements OnInit {
  productCategoryRankings: _.Dictionary<ProductCategoryRanking[]>;

  constructor(
    private productCategoryRankingService: ProductCategoryRankingService
  ) {}

  ngOnInit(): void {
    this.productCategoryRankings = _.groupBy(
      this.productCategoryRankingService.get(),
      "productName"
    );
  }

  getCategory(productCategoryRankings: ProductCategoryRanking[]): string {
    return productCategoryRankings.map(value => value.category).join(", ");
  }

  getRating(productCategoryRankings: ProductCategoryRanking[]): number {
    return productCategoryRankings.map(value => value.rating)[0];
  }
}

/**  Copyright 2020 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license */

<mat-selection-list #values color="primary">
  <mat-list-option
    *ngFor="let kvp of productCategoryRankings | keyvalue"
    class="p-1 m-1"
    checkboxPosition="before"
  >
    <div class="row">
      <div class="col">
        {{ kvp.key }}
      </div>
      <div class="col-auto">
        {{ getRating(kvp.value) }}
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-muted">
        {{ getCategory(kvp.value) }}
      </div>
    </div>
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{ values.selectedOptions.selected.length }}
</p>

<!-- Copyright 2020 Google LLC. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->