TypeScript报错：类型'{}'无法赋值给'string'类型参数求解决

我来帮你搞定这个类型错误问题～ 这个报错的核心原因是TypeScript没办法正确推断出stateCtrl.valueChanges发出的值类型，默认把它当成了{}类型，而你的filterStates函数只接受string类型参数，所以类型校验直接不通过。咱们一步步来修复：

步骤1：明确指定FormControl的类型 #

首先给你的stateCtrl加上明确的类型注解，告诉TypeScript这个表单控件的值是字符串或者null（因为表单控件初始值可能为null）：

stateCtrl: FormControl<string | null>;

步骤2：调整ngOnInit中的映射逻辑 #

在valueChanges的pipe里，处理值可能为null的情况，确保传给filterStates的一定是字符串：

ngOnInit() {
  this.filteredStates = this.stateCtrl.valueChanges
    .pipe(
      startWith(''),
      map(value => {
        // 如果value是null，就用空字符串代替
        const searchValue = value ?? '';
        return this.filterStates(searchValue);
      })
    );
}

步骤3：（可选）优化filterStates的参数与逻辑 #

虽然原来的参数类型是string没问题，但可以让逻辑更语义化——把indexOf(...) === 0换成更直观的startsWith，功能完全一致，代码可读性更好：

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

完整修正后的代码 #

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

export class State {
  constructor(public name: string, public population: string, public flag: string) { }
}

export class AutocompleteOverviewComponent implements OnInit {
  stateCtrl: FormControl<string | null>;
  filteredStates: Observable<State[]>;
  temp:string;
  states: State[] = [
    { name: 'Arkansas', population: '2.978M', flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg' },
    { name: 'California', population: '39.14M', flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg' },
    { name: 'Florida', population: '20.27M', flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Florida.svg' },
    { name: 'Texas', population: '27.47M', flag: 'https://upload.wikimedia.org/wikipedia/commons/f/f7/Flag_of_Texas.svg' }
  ];

  constructor() {
    this.stateCtrl = new FormControl(''); // 初始值设为空字符串，也可以设为null
  }

  ngOnInit() {
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(value => {
          const searchValue = value ?? '';
          return this.filterStates(searchValue);
        })
      );
  }

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

这样修改后，TypeScript就能准确推断所有类型，那个错误就会消失啦～

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