Angular中如何对含数组的对象分组、展示前3组并添加样式

需求说明 #

• 将带优先级的服务报价按优先级分组
• 仅展示排名前三的分组
• 为每个顶级分组添加专属CSS类（如颜色样式）

你的尝试代码 #

// 包含报价的数组
const data = [  
  {"name":"offer1", "prior":1},
  {"name":"offer2", "prior":1},
  {"name":"offer3", "prior":2},
  {"name":"offer4", "prior":2},
  {"name":"offer5", "prior":3},
  {"name":"offer5", "prior":3}
];

// 按优先级排序报价
data.sort((a,b) => Number(a.prior) > Number(b.prior) ? 1 : -1);

// 按优先级分组报价  
this.groupOffers = window._.groupBy(this.relatedmodels.items, e => e.offer_rel_priority);
// 获取前三组
let top1 = Object.entries(this.groupOffers).slice(0,1).map(entry => entry[1]);
let top2 = Object.entries(this.groupOffers).slice(1,2).map(entry => entry[1]);
let top3 = Object.entries(this.groupOffers).slice(2,3).map(entry => entry[1]);

优化实现方案 #

你的代码存在数据源不统一、取组逻辑繁琐的问题，以下是更简洁可靠的实现方式：

1. 正确分组并排序 #

先确保分组后按优先级有序排列，再提取前三组（这里默认优先级数字越小越靠前，若需高优先级在前，调整排序逻辑即可）：

const data = [  
  {"name":"offer1", "prior":1},
  {"name":"offer2", "prior":1},
  {"name":"offer3", "prior":2},
  {"name":"offer4", "prior":2},
  {"name":"offer5", "prior":3},
  {"name":"offer5", "prior":3}
];

// 按优先级升序排序（若要高优先级在前，改为 b.prior - a.prior）
data.sort((a, b) => a.prior - b.prior);

// 使用lodash按优先级分组
const groupedOffers = window._.groupBy(data, 'prior');

// 将分组转换为有序数组，确保按优先级顺序排列，再取前三组
const sortedGroups = Object.entries(groupedOffers).sort(([p1], [p2]) => Number(p1) - Number(p2));
const topThreeGroups = sortedGroups.slice(0, 3);

2. 为分组添加专属CSS类 #

根据分组的排名（第1/2/3组）分配不同的CSS类，渲染时直接绑定：

<!-- 示例渲染代码（以模板引擎为例） -->
<div class="offer-container">
  <% topThreeGroups.forEach(([priority, offers], index) => { %>
    <div class="offer-group priority-rank-<%= index + 1 %>">
      <h4>优先级<%= priority %>报价</h4>
      <ul>
        <% offers.forEach(offer => { %>
          <li><%= offer.name %></li>
        <% }) %>
      </ul>
    </div>
  <% }) %>
</div>

对应的CSS样式：

.priority-rank-1 {
  border-left: 3px solid #dc3545;
  background-color: #f8d7da;
}

.priority-rank-2 {
  border-left: 3px solid #ffc107;
  background-color: #fff3cd;
}

.priority-rank-3 {
  border-left: 3px solid #28a745;
  background-color: #d4edda;
}

.offer-group {
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
}

关键注意点 #

• 分组后的优先级键是字符串类型，排序时要转为数字比较，避免"10"排在"2"前面的错误
• 若需求是优先级数字越大越靠前，只需把排序逻辑改为b.prior - a.prior即可
• 直接用slice(0,3)一次性获取前三组，无需单独定义top1/top2/top3，简化代码

内容的提问来源于stack exchange，提问作者Maxim U