Angular Material生成导航菜单时出现TS2322类型不匹配错误

这个错误是因为BreakpointObserver.observe()方法返回的是Observable<BreakpointState>类型，而不是直接的Observable<boolean>，但自动生成的代码里可能直接把它赋值给了声明为Observable<boolean>的变量，导致类型不兼容。

具体修复步骤： #

1. 打开自动生成的layout.component.ts文件，找到定义isHandset$的代码段：

   // 错误的代码
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset);
   

2. 修改代码，通过RxJS的map操作符提取BreakpointState中的matches属性（这个属性才是表示当前是否匹配断点的布尔值）：

   // 修复后的代码
   import { map } from 'rxjs/operators'; // 别忘了导入map操作符
   
   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
     .pipe(map(state => state.matches));
   

为什么这样修复？ #

BreakpointObserver.observe()方法返回的BreakpointState对象包含了更多断点相关的信息（比如当前匹配的断点列表），matches只是其中一个布尔属性，用来标识当前视图是否符合指定的断点条件。我们需要通过map操作符把这个属性从对象中提取出来，让Observable的输出类型和变量声明的Observable<boolean>保持一致，这样TypeScript就不会再抛出类型错误了。

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