使 Angular Material Grid 响应式（再次）

Question

Angular 材质网格不响应，并且它的列在模板中设置和/或您可以设置变量并具有属性绑定。我正在尝试在我有

的情况下使用后一种方法

public cols：可观察的；

我根据不同的窗口休息时间过度编写的变量。我正在关注this 文章并以类似方式设置了我的代码。但是，我的 .map 函数显示为 unresolved

    ngOnInit(){
        const grid = new Map([
            ["xs", 1],
            ["sm", 2],
            ["md", 2],
            ["lg", 3],
            ["xl", 3]   ]);   let start: number;   grid.forEach((cols, mqAlias) => {
            if (this.observableMedia.isActive(mqAlias)) {
              start = cols;
            }   });   
  this.cols = this.observableMedia.asObservable().map(change => {
              console.log(change);
              console.log(grid.get(change.mqAlias));
              return grid.get(change.mqAlias);
            })
            .startWith(start);
    }

我的进口是

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

我也尝试过通过

导入

import "rxjs/add/operator/map";
import "rxjs/add/operator/startWith";

但这会引发错误，我假设它是由于角度 6 造成的。

关于为什么 .map 函数未定义以及为什么我不能动态更改我的 cols 变量值的任何帮助？

Answer 1

RxJS v5.5.2+ 已移至 Pipeable 运算符，以改进树抖动并更轻松地创建自定义运算符。 现在需要使用pipe 方法组合operators
Refer This
新建导入

import { map} from 'rxjs/operators';

示例

myObservable
  .pipe(filter(data => data > 8),map(data => data * 2),)
  .subscribe(...);

修改后的代码

 this.observableMedia.asObservable().pipe(map(change => {
              console.log(change);
              console.log(grid.get(change.mqAlias));
              return grid.get(change.mqAlias);
            }),startWith(start));