Angular Material网格响应式实现问题：map函数未解析

看起来你踩了RxJS版本升级的坑！Angular 6配套的是RxJS 6+，这个版本彻底改了操作符的使用方式，和你参考的旧文章（基于RxJS 5）的写法不兼容，这就是问题的根源：

核心原因 #

RxJS 6+弃用了直接在Observable实例上链式调用.map()、.startWith()的写法，改为pipeable操作符——所有操作符必须通过.pipe()方法组合使用，而且要从rxjs/operators导入（你已经做对了导入这一步，但用法错了）。另外，旧的rxjs/add/operator/*导入方式在RxJS 6+里已经被移除了，所以导入那些会报错。

修复后的完整代码 #

我帮你调整了代码，适配RxJS 6+的规范，同时优化了初始值的获取逻辑：

import { Component, OnInit } from '@angular/core';
import { ObservableMedia } from '@angular/flex-layout';
import { Observable } from "rxjs";
import { map, startWith } from 'rxjs/operators';

@Component({
  // 这里替换成你的组件元数据（selector、templateUrl等）
})
export class YourGridComponent implements OnInit {
  public cols: Observable<number>;

  ngOnInit(){
    const gridBreakpoints = new Map([
      ["xs", 1],
      ["sm", 2],
      ["md", 2],
      ["lg", 3],
      ["xl", 3]
    ]);

    // 获取页面初始化时的默认列数
    const initialBreakpoint = Array.from(gridBreakpoints.keys())
      .find(mqAlias => this.observableMedia.isActive(mqAlias));
    const initialCols = gridBreakpoints.get(initialBreakpoint) || 1;

    // 改用pipe组合操作符
    this.cols = this.observableMedia.asObservable().pipe(
      map(change => gridBreakpoints.get(change.mqAlias)),
      startWith(initialCols)
    );
  }
}

模板绑定注意事项 #

别忘了你的cols是Observable<number>类型，在模板中必须用async管道订阅它，否则无法正确渲染：

<mat-grid-list [cols]="cols | async" rowHeight="ratio:1">
  <!-- 你的网格项内容 -->
  <mat-grid-tile *ngFor="let item of yourData">
    {{ item.content }}
  </mat-grid-tile>
</mat-grid-list>

这样修改后，.map未定义的错误会消失，窗口大小变化时cols也会自动响应更新了。

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