以下是一个使用Angular框架按类别显示可观察列表的解决方案。我们将使用一个简单的示例来演示如何实现它。

首先，我们需要创建一个名为Item的类，该类将具有name和category属性。

export class Item {
  name: string;
  category: string;
}

然后，我们将创建一个名为ItemService的服务，该服务将包含一个可观察的项目列表，并提供一些方法来获取和过滤列表。

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Item } from './item';

@Injectable({
  providedIn: 'root'
})
export class ItemService {
  private items: Item[] = [
    { name: 'Item 1', category: 'Category A' },
    { name: 'Item 2', category: 'Category B' },
    { name: 'Item 3', category: 'Category A' },
    { name: 'Item 4', category: 'Category C' },
    { name: 'Item 5', category: 'Category B' },
  ];

  getItems(): Observable {
    return of(this.items);
  }

  getItemsByCategory(category: string): Observable {
    const filteredItems = this.items.filter(item => item.category === category);
    return of(filteredItems);
  }
}

接下来，我们将创建一个名为ItemListByCategoryComponent的组件，该组件将使用ItemService来获取和显示按类别过滤后的项目列表。

import { Component, OnInit } from '@angular/core';
import { ItemService } from './item.service';
import { Item } from './item';

@Component({
  selector: 'app-item-list-by-category',
  template: `
    
Items by Category
    

      
{{ category }}
      

        

          {{ item.name }}
        
      
    
  `
})
export class ItemListByCategoryComponent implements OnInit {
  categories: string[] = ['Category A', 'Category B', 'Category C'];

  constructor(private itemService: ItemService) { }

  ngOnInit() { }

  getItemsByCategory(category: string): Observable {
    return this.itemService.getItemsByCategory(category);
  }
}

最后，我们需要在AppModule中声明和导入ItemService和ItemListByCategoryComponent。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ItemService } from './item.service';
import { ItemListByCategoryComponent } from './item-list-by-category.component';

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, ItemListByCategoryComponent],
  providers: [ItemService],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，我们可以在根组件中使用ItemListByCategoryComponent来显示按类别过滤后的项目列表。

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

@Component({
  selector: 'app-root',
  template: `
    
  `
})
export class AppComponent { }

这样，当我们运行应用程序时，将会显示一个按类别分组的可观察项目列表。

希望这个例子能帮助到你！