Angular 5+Angular Material自动补全报subscribe未定义错误

我来帮你定位问题并给出修复方案——这个报错的核心是在切换加载第二个文档数据时，自动补全的数据流里出现了空值访问的情况。

问题根源 #

先看你ngOnInit里的这段代码：

this.filteredPatients = this.myControl.valueChanges.pipe(
  startWith<string | Patient>(''),
  map(patient => typeof patient === 'string' ? patient : patient.name), // 报错的核心位置
  map(name => name ? this.filterPatient(name) : this.listPatients.slice())
);

当你加载第二个文档时，大概率是myControl的值被重置成了undefined（比如表单重置、新文档加载时未给自动补全设置初始值）。这时候进入map操作的patient是undefined，既不是字符串也不是有效的Patient对象，直接访问patient.name就会抛出空值错误，进而导致整个Observable流中断，最终出现subscribe相关的报错。

修复方案 #

我们需要在访问patient.name前先做空值校验，避免无效访问。这里提供两种可行的写法：

方案1：使用可选链+空值合并（推荐，ES2020+支持） #

this.filteredPatients = this.myControl.valueChanges.pipe(
  startWith<string | Patient | undefined>(''), // 明确标注可能的类型
  map(patient => {
    if (typeof patient === 'string') {
      return patient;
    }
    // 若patient为undefined/null，返回空字符串兜底
    return patient?.name ?? '';
  }),
  map(name => name ? this.filterPatient(name) : this.listPatients.slice())
);

方案2：传统条件判断（兼容旧版ES语法） #

如果你的项目还没升级到ES2020，可以用这种写法：

this.filteredPatients = this.myControl.valueChanges.pipe(
  startWith<string | Patient | undefined>(''),
  map(patient => {
    if (typeof patient === 'string') {
      return patient;
    }
    // 先判断patient是否存在，再访问name属性
    if (!patient) {
      return '';
    }
    return patient.name;
  }),
  map(name => name ? this.filterPatient(name) : this.listPatients.slice())
);

额外优化建议 #

1. 加载新文档时重置自动补全状态：在startProcess方法里添加重置逻辑，避免旧数据干扰新文档的表单：

startProcess(indexElt) {
  // 重置自动补全控件和患者列表
  this.myControl.setValue('');
  this.listPatients = [];
  // ... 原有代码逻辑
}

2. 完善displayFnPat的空值处理：同样避免空值访问，让模板渲染更稳定：

displayFnPat(patient: Patient | undefined): string | undefined {
  return patient?.name;
}

这样修改后，加载第二个文档时即使自动补全控件的值为空，也不会触发空值错误，整个自动补全的数据流能正常工作。

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