Angular 14使用mediaObserver报错：Observable与Subscription类型不匹配

错误原因 #

Angular 14的类型检查机制比12更严格，你当前直接将Observable<void>类型的数据流赋值给了类型为Subscription的变量cols，两者类型不匹配，触发了类型错误。

修复方式 #

根据cols的实际用途，有两种修复路径：

路径1：cols用于存储订阅实例（后续需取消订阅） #

如果cols是用来保存订阅对象、方便组件销毁时取消订阅的，需要订阅Observable，将返回的Subscription赋值给cols：

// 先明确cols的类型为Subscription
private cols: Subscription;

// 订阅Observable，将返回的订阅实例赋值给cols
this.cols = this.mediaObserver.asObservable().pipe(
  map((change: MediaChange[]) => {
    this.deviceAlias = change[0].mqAlias;
    // 若需要根据设备类型生成列配置，可在此返回对应配置
    // return this.getColumnsForDevice(this.deviceAlias);
  })
).subscribe((columns) => {
  // 若map中有返回列配置，在此将配置赋值给实际用于渲染的变量
  // this.displayColumns = columns;
});

// 组件销毁时记得取消订阅（可选，若用async管道可省略）
ngOnDestroy() {
  this.cols?.unsubscribe();
}

路径2：cols用于存储UI列配置 #

如果cols是用来给模板提供列配置数据的，需要将cols声明为Observable类型，并配合模板的async管道使用：

// 声明cols为对应列类型的Observable（替换YourColumnType为实际列类型）
cols: Observable<YourColumnType[]>;

this.cols = this.mediaObserver.asObservable().pipe(
  map((change: MediaChange[]) => {
    this.deviceAlias = change[0].mqAlias;
    // 根据设备类型返回对应的列配置
    switch(this.deviceAlias) {
      case 'xs':
        return [{ field: 'id', header: 'ID' }, { field: 'name', header: '名称' }];
      case 'md':
        return [{ field: 'id', header: 'ID' }, { field: 'name', header: '名称' }, { field: 'status', header: '状态' }];
      default:
        return [{ field: 'id', header: 'ID' }, { field: 'name', header: '名称' }, { field: 'status', header: '状态' }, { field: 'operation', header: '操作' }];
    }
  })
);

在模板中使用async管道自动订阅/取消订阅：

<ng-container *ngFor="let col of cols | async">
  <!-- 列渲染逻辑 -->
</ng-container>

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