使用自定义管道实现根据首字母分组，并通过 *ngFor 指令在模板中重新赋值变量。

首先，在组件中定义一个用于存储数据的数组，并在 ngOnInit() 方法中初始化：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-list',
  template: `
    

      
{{ group.letter }}
      

        
{{ item.name }}
      
    
  `
})
export class ListComponent implements OnInit {

  items = [
    { name: 'Apple', id: 1 },
    { name: 'Banana', id: 2 },
    { name: 'Cherry', id: 3 },
    { name: 'Blueberry', id: 4 },
    { name: 'Coconut', id: 5 },
    { name: 'Grape', id: 6 },
    { name: 'Kiwi', id: 7 },
    { name: 'Mango', id: 8 },
    { name: 'Orange', id: 9 },
    { name: 'Pineapple', id: 10 }
  ];

  groups: any[];

  ngOnInit() {
    this.groups = this.groupByInitialLetter(this.items, 'name');
  }

  groupByInitialLetter(array: any[], key: string): any[] {
    return array.reduce((groups, item) => {
      const group = groups.find(g => g.letter === item[key][0]);
      if (group) {
        group.items.push(item);
      } else {
        groups.push({ letter: item[key][0], items: [item] });
      }
      return groups;
    }, []);
  }

}

然后，创建一个名为 groupByLetter 的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'groupByLetter',
  pure: false
})
export class GroupByLetterPipe implements PipeTransform {

  transform(value: any[], key: string): any[] {
    const groups = value.reduce((groups, item) => {
      const group = groups.find(g => g.letter === item[key][0]);
      if (group) {
        group.items.push(item);
      } else {
        groups.push({ letter: item[key][0], items: [item] });
      }
      return groups;
    }, []);

    return groups;
  }

}

最后，在模板中使用管道重新分配变量：