material@2.0.0-beta.12中mat-autocomplete使用报错求助

我看到你在使用Angular 4.4.4搭配Material 2.0.0-beta.12的mat-autocomplete组件时遇到了类型错误，问题出在构造函数的map操作里。让我帮你分析下原因并给出解决方案：

问题根源 #

1. RxJS版本不匹配：你当前使用的是rxjs@5.0.1，而StackBlitz示例用的是RxJS 5.5+引入的pipeable操作符（也就是从rxjs/operators导入的startWith、map），但5.0.1还不支持pipe()方法，而是用链式调用的方式。
2. 类型推断问题：stateCtrl.valueChanges的输出类型被推断为any，导致map回调里的state类型不确定，而你的filterStates函数期望接收一个string类型的参数，所以触发了类型错误。

解决方案 #

步骤1：调整RxJS操作符的导入方式

把原来的pipeable操作符导入替换为RxJS 5.x的链式操作符导入：

// 替换原来的导入
// import {startWith} from 'rxjs/operators/startWith';
// import {map} from 'rxjs/operators/map';

// 使用RxJS 5.x的导入方式
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

步骤2：修改构造函数中的数据流逻辑

去掉pipe()方法，改用链式调用，并明确指定state的类型为string：

constructor() {
  this.stateCtrl = new FormControl(''); // 初始化空字符串，确保valueChanges输出string类型
  this.filteredStates = this.stateCtrl.valueChanges
    .startWith('')
    .map((state: string) => state ? this.filterStates(state) : this.states.slice());
}

步骤3：确保filterStates的类型安全

可以给filterStates的参数添加明确的类型标注，进一步避免类型问题：

filterStates(name: string) {
  return this.states.filter(state => state.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

额外说明 #

如果之后你打算升级RxJS到5.5+或更高版本，就可以使用示例中的pipeable操作符，但在当前的5.0.1版本下，链式调用是唯一可行的方式。另外，你的TypeScript版本（2.2.2）完全支持这些修改，不需要额外升级。

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