Angular中如何按自定义字母组拆分并分组媒体名称数组？

需要将媒体名称按自定义字母组（ABCDEF、GHIJK、LMNO、PRSTU、VYZXWQ、0123456789）分组，每组对应一个数组；同时将HTML中手动编写的分组标题改为动态生成。现有数据按日期（publishDate）分组，核心处理对象是jobs数组下的mediaName字段。

1. TypeScript 分组逻辑处理 #

先定义自定义分组规则，再对每个日期下的媒体列表完成排序、分组操作：

// 自定义分组配置：组名 + 对应字符集合
private mediaGroups = [
  { name: 'Internet_ABCDEF', chars: 'ABCDEF' },
  { name: 'Internet_GHIJK', chars: 'GHIJK' },
  { name: 'Internet_LMNO', chars: 'LMNO' },
  { name: 'Internet_PRSTU', chars: 'PRSTU' },
  { name: 'Internet_VYZXWQ', chars: 'VYZXWQ' },
  { name: 'Internet_0123456789', chars: '0123456789' }
];

getJobsForInternet() {
  this.sidenavService.getInternetJobs().subscribe((jobs: any) => {
    this.getJobs = jobs.map(jobItem => {
      // 按土耳其语规则对媒体名称排序
      const sortedJobs = [...jobItem.jobs].sort((a, b) => {
        const _a = a.mediaName.toUpperCase();
        const _b = b.mediaName.toUpperCase();
        return _a.localeCompare(_b, 'tr', { sensitivity: 'base' });
      });

      // 按自定义规则分组，过滤空分组
      const groupedJobs = this.mediaGroups
        .map(group => {
          const matchedJobs = sortedJobs.filter(job => {
            const firstChar = job.mediaName.charAt(0).toUpperCase();
            return group.chars.includes(firstChar);
          });
          return {
            groupName: group.name,
            jobs: matchedJobs,
            count: matchedJobs.length
          };
        })
        .filter(group => group.count > 0);

      // 将分组结果合并到原日期项
      return { ...jobItem, groupedJobs };
    });
  });
}

2. HTML 动态渲染分组 #

修改模板，遍历处理后的分组数据，替换手动编写的分组标题：

<nav class="dbt-tree-nav">
  <details *ngFor="let internetJobs of getJobs" class="dbt-tree-nav__item is-expandable">
    <summary class="dbt-tree-nav__item-title">{{ internetJobs.publishDate }}</summary>
    <!-- 动态遍历每个媒体分组 -->
    <details *ngFor="let group of internetJobs.groupedJobs" class="dbt-tree-nav__item is-expandable">
      <summary class="dbt-tree-nav__item-title">{{ group.groupName }}</summary>
      <!-- 显示分组内媒体数量及详情 -->
      <details class="last-internet dbt-tree-nav__item is-expandable">
        <summary class="last-internet dbt-tree-nav__item-title">
          ({{ group.count }}) {{ group.jobs.length }}
        </summary>
        <!-- 可选：渲染每个媒体的具体信息 -->
        <div class="media-item" *ngFor="let job of group.jobs">
          <span>{{ job.mediaName }}</span>
          <!-- 可添加ids等其他字段的展示 -->
        </div>
      </details>
    </details>
  </details>
</nav>

关键细节 #

• 统一将mediaName首字符转大写，避免大小写差异导致分组错误
• 先排序再分组，保证分组内的媒体名称仍符合排序规则
• 过滤空分组，避免生成无内容的分组标题

内容的提问来源于stack exchange，提问作者Cem Özbey