在Angular中，可以使用Angular的管道来实现列表的过滤和排序。

首先，需要在组件中定义列表数据和过滤条件、排序条件的变量。例如：

export class MyComponent {
  items = [
    { name: 'Item 1', category: 'Category A', price: 10 },
    { name: 'Item 2', category: 'Category B', price: 20 },
    { name: 'Item 3', category: 'Category A', price: 15 },
    { name: 'Item 4', category: 'Category C', price: 25 },
  ];

  filterCategory = '';
  sortField = '';
}

然后，在模板中使用管道来过滤和排序列表。例如：

Sort by Name
Sort by Price



  

    {{ item.name }} - {{ item.category }} - {{ item.price }}
  

接下来，我们需要创建两个自定义管道来实现过滤和排序功能。

首先，创建一个名为filter的管道：

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], filter: string): any[] {
    if (!items || !filter) {
      return items;
    }
    return items.filter(item => item.category.toLowerCase().includes(filter.toLowerCase()));
  }
}

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

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

@Pipe({
  name: 'sortBy'
})
export class SortByPipe implements PipeTransform {
  transform(items: any[], field: string): any[] {
    if (!items || !field) {
      return items;
    }
    return items.sort((a, b) => a[field] > b[field] ? 1 : -1);
  }
}

最后，需要将这两个自定义管道添加到模块的declarations数组中，以便在组件中使用：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { FilterPipe } from './filter.pipe';
import { SortByPipe } from './sort-by.pipe';

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

现在，当用户在过滤输入框中输入内容或点击排序按钮时，列表会根据过滤条件和排序条件进行实时更新。