Angular Material中提供了一个自动完成组件，但当列表的数量增多时，它的效果并不好。因此，我们需要筛选出我们想要的结果，以提高自动完成组件的可用性。

以下是如何使用Angular Material中的自动完成筛选器的示例代码：

HTML代码：

  
  
    
      {{ option.name }}
    
  

TypeScript代码：

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { startWith } from 'rxjs/operators/startWith';
import { map } from 'rxjs/operators/map';

export class Option {
  constructor(public name: string) { }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myControl = new FormControl();
  options = [
    new Option('Option 1'),
    new Option('Option 2'),
    new Option('Option 3'),
    new Option('Option 4'),
    new Option('Option 5')
  ];

  filteredOptions: Observable;

  constructor() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith(''),
        map(val => this.filter(val))
      );
  }

  filter(val: string): Option[] {
    return this.options.filter(option =>
      option.name.toLowerCase().indexOf(val.toLowerCase()) === 0);
  }

  displayFn(option: Option): string {
    return option ? option.name : '';
  }
}

在这个例子中，我们创建了一个FormControl和一个由Option对象组成的选项数组，然后使用RxJS过滤器对这些选项进行筛选。我们还定义了一个用于显示选项名称的函数。最后，我们将这些过滤后的选项传递给mat-option指令，以在Angular Material的自动完成组件中展示它们。