Angular Material自定义过滤自动完成组件TS2684报错求助

嘿，我刚看完你的问题，这个错误我之前在RxJS 5.x版本里也踩过坑！本质是RxJS操作符的导入和使用方式不匹配导致的this上下文绑定问题，咱们一步步来解决：

错误原因分析 #

你用的是RxJS 5.5.2，这个版本刚引入了Pipeable Operators，但你的导入方式不对：你直接从rxjs/operator/xxx单独导入了startWith和map，这些函数需要绑定到Observable实例的this才能正常工作，但在pipe里直接调用时，this丢失了，变成了void，所以TypeScript抛出了TS2684错误，说当前this的类型无法匹配方法需要的Observable类型。

具体修复方案 #

方案1：用RxJS 5.5+推荐的Pipeable Operators（更规范） #

修改你的RxJS导入语句，把单独的操作符导入换成从rxjs/operators统一导入：

// 替换原来的startWith和map导入
import { startWith, map } from 'rxjs/operators';
// 保留Observable的导入
import { Observable } from 'rxjs/Observable';

这样你的pipe链式调用就能正常工作了，因为这些操作符是专门为pipe设计的，会自动处理this上下文的绑定。

方案2：改用原型链式操作符（兼容旧写法） #

如果你不想用pipe，也可以回到RxJS 5.x的传统写法，导入操作符的原型扩展：

// 替换原来的startWith和map导入
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

然后修改ngOnInit里的代码，去掉pipe，直接链式调用：

this.filteredCities = this.cityControl.valueChanges
  .startWith('')
  .map(val => this.filter(val));

额外的小建议 #

看你的代码，cityControl是单独声明的FormControl，但你的reportDataForm里也有一个city控件，这会导致两个控件数据不同步，建议统一成一个：

ngOnInit() {
  this.reportDataForm = new FormGroup({
    'city': new FormControl(null, [Validators.required]),
  });
  // 把cityControl关联到表单组里的city控件
  this.cityControl = this.reportDataForm.get('city') as FormControl;
  
  // 然后再写过滤逻辑
  this.filteredCities = this.cityControl.valueChanges
    .pipe(
      startWith(''),
      map(val => this.filter(val))
    );
}

这样修改后，TypeScript的错误应该就消失了，你的Autocomplete过滤功能也能正常运行啦！

内容的提问来源于stack exchange，提问作者Linpter